The simplest HTML5 validation feature is the required attribute. To make an input mandatory, add this attribute to the element. When this attribute is set, the element matches the :required UI pseudo-class and the form won't submit, displaying an error message on submission when the input is empty.
Mainly there are two ways to perform HTML form validation. The first is using the built-in functionality provided in HTML5, and the second is by using JavaScript. Using the first method, we don't need to write extra code.
Assuming that you have set the form element to an object called $form
, then if (!$form.valid || $form.valid())
is clever syntax that means "if $form
doesn't have a method called valid
, or if valid()
returns true". Typically you will have installed and initialized the jQuery Validation plugin by then, but this prevents the form from becoming disabled if the validation plugin is not loaded.
You can do a similar test using the HTML5 method checkValidity
, looking something like this:
if (!$form.checkValidity || $form.checkValidity()) {
/* submit the form */
}
EDIT: checkValidity is a function from the HTML5 forms spec. As of February 2016 CanIUse.com reports that over 95% of browsers support it.
In HTML5, you may use a "form" attribute on an element to explicitly associate it with a Form element regardless of where it is positioned in the page structure: http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form
In compliant browsers, you ought to be able to put your input[type=submit][form=id] element anywhere and still have it properly trigger the validation and submission process.
I tend to put code that is supposed to intercept the submission process in the form's "submit" event handler, that way it is triggered by users hitting the Enter key as well as any input[type=submit] buttons I have.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With