Recently I had a problem submitting the form I wrote and stared confused at my screen for some time trying to understand, what could be the reason. Let my tell you how I approached the problem and have found a solution.

Step 1: Make sure it’s a form

This may sound silly if you think about traditional forms – you know, the ones built with form tag, however as the web embraces more and more javascript the form tag is no longer necessary to submit data to the server. Even if the necessity is gone, using form tag is still a best practice and makes processing forms with or without javascript easier, like when you can use FormData or submitting a form hitting enter key. Without the form tag the enter key will not have this much desired behavior and the form may appear broken to your users.

Step 2: Submit the form with an element with type="submit"

Another situation, in which your users may not be able to submit a form, takes place when you use some generic element like div or span to create a submit “button”, because those elements are not focusable by default. It’s always best to use a real button (<button type="submit">Submit</button>) or input (<input type="submit" value="Submit"/>).

Step 3: Look for interfering javascript

When you submit a form, the submit event gets dispatched and bubbles all the way to the root element. If you use event delegation (listen for submit event on the root element), there may be another event listener registered somewhere between the form and root element, preventing event bubbling. This way your event listener never gets to know, that the form got submitted.

Other events – like click – may also be captured and not bubble to the place, where you listen for them.

If your form gets rendered and should be submitted without javascript, you may try to disable all javascript in developer tools and see if the form works then.

Step 4: Input validation

If an input is required (e.g. <input name="firstname" required/>), the browser will not allow submitting the form until a value is entered. This behavior does NOT get cancelled if the input is hidden with CSS (e.g. display: none). However, if the input is hidden with CSS, it prevents the browser message from being displayed, making the error really confusing.