html5必需属性来触发jquery事件

Question

I am making a form in which I am using required attribute on its elements. Now consider the following situation-

The form is divided in two tabs say General Details and Additional Details . So while submitting the form if I leave the required field blank on the visible tab then user can view the message. But suppose user is on first tab and error comes on second tab then User cannot view the error popup and he is clueless about why the form is not submitting.

Now I am searching for a way a jQuery event can be fired, whenever the required attribute error comes .

So on this event I can program to show the tab on which the error comes.

Please note I know I can use the JS/jQuery based form validation but the main thing is that, this form is being generated by Grails and the required field is auto-applied depending on the database. So I cannot use per form based JS validation.

Answer 1

See how the required field is selected with the :invalid pseudo class:

 jQuery(document).ready(function(){ jQuery('button').on('click',function(){ jQuery('input:invalid').css('background-color', '#F00'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="required test"> <input type="text" required="required" /> <button>click</button> </form> 

You could simply check for the fields visibility, and if not given traverse up to the parent tab, give the parent tab a class which marks the tab label as containing something invalid.

Answer 2

One way is to use submit button and call myValidationFunction() method of JavaScript as action. (action="myValidationFunction();").

Other way is to use button and call myValidationFunction() method of JavaScript as on Click event of that button. After that, inside myValidationFunction(), you can use checkValidity() method to check validity of form at once or particular element and run your custom code to shift on particular tab if there is error to show to the user. function myValidationFunction() { if ( $('#myInput')[0].checkValidity() ) { // code to move to the particular tab } }