Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 validation when the input type is not "submit"

I'm using HTML5 for validating fields. I'm submitting the form using JavaScript on a button click. But the HTML5 validation doesn't work. It works only when then input type is submit. Can we do anything other than using JavaScript validation or changing the type to submit?

This is the HTML code:

<input type="text" id="example" name="example" value="" required> <button type="button"  onclick="submitform()" id="save">Save</button> 

I'm submitting the form in the function submitform().

like image 949
I'm nidhin Avatar asked May 23 '13 07:05

I'm nidhin


People also ask

How do I display HTML5 validation error?

You can now use the HTMLFormElement. reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibility at MDN). It reports validity errors without triggering the submit event and they are shown in the same way.

How do I bypass HTML5 validations?

To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.

Does HTML5 have form validation?

Using HTML5, we can create a form with built in validation (i.e. no javascript required). Earlier, we were using JAVASCRIPT to control form validation.


2 Answers

The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.

However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity() method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I’m afraid you would need to check all the constrained fields, since the validityMessage property is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:

function submitform() {   var f = document.getElementsByTagName('form')[0];   if(f.checkValidity()) {     f.submit();   } else {     alert(document.getElementById('example').validationMessage);   } } 
like image 138
Jukka K. Korpela Avatar answered Nov 05 '22 02:11

Jukka K. Korpela


I may be late, but the way I did it was to create a hidden submit input, and calling it's click handler upon submit. Something like (using jquery for simplicity):

<input type="text" id="example" name="example" value="" required> <button type="button"  onclick="submitform()" id="save">Save</button> <input id="submit_handle" type="submit" style="display: none">  <script> function submitform() {     $('#submit_handle').click(); } </script> 
like image 44
Bekodo Avatar answered Nov 05 '22 03:11

Bekodo