HTML5 validation when the input type is not submit
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);
}
}
How to prevent HTML5 form validation on non-submit button?
Give the form an onsubmit
handler containing e.preventDefault()
, and in your "submit" handler call form.submit()
.
How to force a html5 form validation without submitting it via jQuery
To check whether a certain field is valid, use:
$('#myField')[0].checkValidity(); // returns true|false
To check if the form is valid, use:
$('#myForm')[0].checkValidity(); // returns true|false
If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:
var $myForm = $('#myForm');
if (!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
}
Keep in mind that, HTML5 validation is not supported in all browsers till now.
Pattern HTML5 validation not preventing form submit when not validated
Clicking the button doesn't equate to submitting the form. The order of actions is:
- Click the button
- Fire
click
event on the button - If the
click
event does not cancel the event, then firesubmit
on the form - If the
submit
event does not cancel the event (eg. validation errors!) then proceed to submit the form
Since you're doing your work in the click
event, the form hasn't been validated yet! You should instead do the work in the form's submit
event.
Trigger standard HTML5 validation (form) without using submit button?
The accepted answer to this question appears to be what you're looking for.
Short summary: in the event handler for the submit, call event.preventDefault()
.
Can you submit HTML5 form WITHOUT validating?
You can add the "novalidate" attribute when the user clicks on a given button.
<form method="post" action="/foo" novalidate>...</form>
This disables html validation.
Add it again when you want your final submission.
EDIT
Apparently there's a better option, the formnovalidate attribute, that you can add to a specific field (which apparently is exactly what you want):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
Related Topics
Is It Correct to Use Alt Tag for an Anchor Link
CSS Transition - Eases in But Doesn't Ease Out
Aligning Decimal Points in HTML
What Makes the Text on a <Button> Element Vertically Centered
Padding Is Not Working in Safari and Ie in Select List
Best Way to Manage Whitespace Between Inline List Items
What Happens If the Meta Tags Are Present in the Document Body
Jquery Click Function Doesn't Work After Ajax Call
Is Using <Li> Without Enclosing <Ul> Tags Dangerous
Options with Display:None Not Hidden in Ie
Fallback for CSS Attributes Without Unit