When I was trying to create a markdown textbox using SimpleMDE in my Django application.
After adding the library, form submission was not working and the following error was displayed in the console.
An invalid form control with name='body' is not focusable.
This error was completely new to me and in this post, I will show you how to fix this error.
The reason
In my case, this error was caused due to a required attribute added to the input field.
Note that the CSS display property of the element was set to none by SimpleMDE library to hide it from the UI.
Usually, the browser displays an error message if there are any validation mistakes in the form field.
But in this case, Chrome was unable to display the error message of the element as it was hidden from the UI. This caused the error.
How to fix?
This error can be easily fixed by removing the required attribute from the input field or the textarea tag.
You can either remove the HTML markup or use JavaScript to remove the required attribute if you are using any form creation libraries.
document.getElementById('element_id').removeAttribute('required');
Replace element_id with the id of the element that causes this error.
Share your thoughts
Are there any other ways to solve this problem? Let me know in the comments below.
