This content originally appeared on David Walsh Blog and was authored by David Walsh
Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required
and pattern
to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript?
validity
Each form element (input
, for example) provides a validity
property which represents a ValidityState
. ValidityState
looks something like this:
// input.validity { badInput: false, customError: true, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valid: false, valueMissing: true }
Each property in the ValidityState
can roughly match a specific validation issue: valueMissing
would match the required
attribute, tooLong
and tooShort
match minLength
and maxLength
, etc.
Checking Validity and Setting a Custom Validation Message
Each form field provides a default error message for each error type, but setting a more custom message per your application is likely better. You can use the form field’s setCustomValidity
to create your own message:
// Check validity input.checkValidity(); if(input.validity.valueMissing) { input.setCustomValidity('This is required, bro! How did you forget?'); } else { // Clear any previous error input.setCustomValidity(''); }
Simply setting the message by setCustomValidity
doesn’t show the message, however.
reportValidity
To get the error to display to the user, use the form element’s reportValidity
method:
// Show the error! input.reportValidity();
The error tooltip will immediately display on the screen. The following example displays the error every five seconds:
See the Pen Untitled by David Walsh (@darkwing) on CodePen.
Having hooks into the native form validation system is so valuable and I wish developers used it more. Every website has its own client side validation styling, event handling, etc. Let’s use what we’ve been provided!
The post Customizing HTML Form Validation appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
David Walsh | Sciencx (2023-01-09T10:57:00+00:00) Customizing HTML Form Validation. Retrieved from https://www.scien.cx/2023/01/09/customizing-html-form-validation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.