HTML5 custom form validation not showing custom error natively
Basic HTML5 form with custom validation. If the value provided is not a number, the browser should display a "Field must be a number" error message. If you enter "abc" and click Submit (or press Enter), the field will be marked as invalid, but no error message will appear. Press again (or press Enter) and it will display a message. This double submit behavior appears in recent versions of Firefox, Chrome, Safari, and IE on Windows and OS X. You will notice that the default "this field is required ..." message appears in the first view and does not show the odd behavior.
As an aside, I am well aware that this check will not work in older versions of IE and that the input field may be of a type number
that would automatically complete this check; this is a simplified example of my problem for demonstration purposes only.
Javscript
var form = document.getElementById("form");
var field = document.getElementById("field");
form.onsubmit = validateForm;
function validateForm() {
if(isNaN(field.value)) {
field.setCustomValidity("Field must be a number.");
} else {
return true;
}
return false;
}
Html
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" required>
<input type="submit">
</form>
source to share
After setting the validity message, you need to call element.reportValidity()
for it to appear.
setCustomValidity(message)
Sets a custom error message string that will be displayed to the user when the form is submitted, explaining why the value is invalid - when the message is set, the valid state is set to invalid. To clear this state, call the function with an empty string passed as an argument. In this case, the custom error message is cleared, the item is considered valid, and the message is not displayed.
reportValidity()
Checks the value of an element for its constraints, and reports its validity state; if the value is invalid, it generates an invalid event on the element, returns false, and then informs the user of the validity status by any agent available to the user. Otherwise, true is returned.
You also need to use event.preventDefault()
in the form submit event whenever the input is invalid so that the form submission doesn't go through.
Here's an example:
var form = document.getElementById('form');
var field = document.getElementById('field');
form.onsubmit = validateForm;
/* this is the function that actually marks the field as valid or invalid */
function validateForm(event) {
if (isNaN(field.value)) {
field.setCustomValidity('Field must be a number.');
field.reportValidity();
event.preventDefault();
}
field.setCustomValidity('');
}
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" required />
<input type="submit" />
</form>
You can also use the HTML5 templated attribute to do most of the form validation without JavaScript, or augment it with JavaScript to set custom error messages.
Pattern : the regular expression against which the check value is checked. The pattern must match the entire value, not just a subset. Use the title attribute to describe the template to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, or email; otherwise, it is ignored. The regular expression language is the same as the JavaScript language. The pattern is not surrounded by forward slashes.
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" pattern="\d*" title="Field must be a number." required />
<input type="submit" />
</form>
source to share