Use of setCustomValidity in form requires two clicks for onsubmit

Question

I am working on a form that makes use of the HTML5 form validation attribute required for various text and radio button fields. The form also has two sets of checkboxes, of which at least one checkbox must be checked.

In order to keep the user error feedback consistent I am using the setCustomValidity method to throw a native error bubble when the checkboxes are left unchecked. This all works fine, however, there is an issue with error feedback when the form is submitted and the onsubmit event is used to trap unchecked checkboxes. This issue doesn't arise when the onclick event is bound to the submit button instead, but I understand it is preferable to use onsubmit.

Onclick test case (Click submit button and error bubble appears first time!) http://jsfiddle.net/Jimadine/bZe5e/

Onsubmit test case (Click submit button - error bubble appears after second click) http://jsfiddle.net/Jimadine/2vLszqac/

Furthermore, from my testing of the onsubmit case, Firefox highlights the unchecked checkboxes after the first click of the submit button; this is indicated by a red glow around the checkboxes. Then after a second click the error bubble displays. In other modern browsers the first click displays no on-screen indication that the checkboxes were left unchecked; I presume this is how the UX side of HTML5 validation was implemented in these browsers and that Firefox chose to do things slightly differently.

My question is why does the onsubmit test case require two clicks and what is an appropriate way to rectify this so it behaves like the onclick test case? I'm guessing it has something to do with the submit event firing after the validation but I'm not sure how to correct my code.

Answer 1

Here is a working jsfiddle base on your first example http://jsfiddle.net/bZe5e/6/.

The key is instead of doing this only on submit/button click. You are checking the validity on change + initially

doValidate();