HTMLObjectElement.setCustomValidity - Web APIs
the setcustomvalidity() method of the htmlobjectelement interface sets a custom validity message for the element.
... syntax htmlobjectelement.setcustomvalidity(message); parameters error the message to use for validity errors.
... function validate(inputid) { var input = document.getelementbyid(inputid); var validitystate_object = input.validity; if (validitystate_object.valuemissing) { input.setcustomvalidity('you gotta fill this out, yo!'); input.reportvalidity(); } else if (input.rangeunderflow) { input.setcustomvalidity('we need a higher number!'); input.reportvalidity(); } else if (input.rangeoverflow) { input.setcustomvalidity('thats too high!'); input.reportvalidity(); } else { input.setcustomvalidity(''); input.reportvalidity(); } } it's vital to set the message to an e...
... specifications specification status comment html living standardthe definition of 'setcustomvalidity' in that specification.

HTMLSelectElement.setCustomValidity() - Web APIs
the htmlselectelement.setcustomvalidity() method sets the custom validity message for the selection element to the specified message.
... syntax selectelt.setcustomvalidity(string); parameters string is the domstring containing the error message.
... specifications specification status comment html living standardthe definition of 'htmlselectelement.setcustomvalidity()' in that specification.
... html5the definition of 'htmlselectelement.setcustomvalidity()' in that specification.

Constraint validation - Developer guides
basically, the idea is to trigger javascript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setcustomvalidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.
... if (constraint.test(zipfield.value)) { // the zip follows the constraint, we use the constraintapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.getelementbyid("country").onchange = ch...
...checking this on the client side before the file is transmitted to the server requires combining the constraint validation api, and especially the field.setcustomvalidity() method, with another javascript api, here the file api.
...And 2 more matches

Client-side form validation - Learn web development
setcustomvalidity(message): adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed.
...tart.html as a basis, if you like): <form> <label for="mail">i would like you to provide me with an e-mail address:</label> <input type="email" id="mail" name="mail"> <button>submit</button> </form> and add the following javascript to the page: const email = document.getelementbyid("mail"); email.addeventlistener("input", function (event) { if (email.validity.typemismatch) { email.setcustomvalidity("i am expecting an e-mail address!"); } else { email.setcustomvalidity(""); } }); here we store a reference to the email input, then add an event listener to it that runs the contained code each time the value inside the input is changed.
...if so, we call the setcustomvalidity() method with a custom message.
... if the validity.typemismatch property returns false, we call the setcustomvalidity() method an empty string.

Constraint validation API - Web APIs
this will be displayed in the ui if the element is the only form control with a validity problem; if a custom error message is set using setcustomvalidity(), this will be shown.
... setcustomvalidity(message) sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid.
... if you wanted to instead display custom error messages, you could use javascript like the following: const nameinput = document.queryselector('input'); const form = document.queryselector('form'); nameinput.addeventlistener('input', () => { nameinput.setcustomvalidity(''); nameinput.checkvalidity(); }); nameinput.addeventlistener('invalid', () => { if(nameinput.value === '') { nameinput.setcustomvalidity('enter your username!'); } else { nameinput.setcustomvalidity('usernames can only contain upper and lowercase letters.
...for this to happen, the custom validity has to be cancelled, by invoking setcustomvalidity() with an empty string value.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
setcustomvalidity() sets a custom message to display if the input element's value isn't valid.
... function validate(input) { let validitystate_object = input.validity; if(validitystate_object.valuemissing) { input.setcustomvalidity('a value is required'); } else if (input.rangeunderflow) { input.setcustomvalidity('your value is too low'); } else if (input.rangeoverflow) { input.setcustomvalidity('your value is too high'); } else { input.setcustomvalidity(''); } } the last line, setting the custom validity message to the error string is vital.
... if you wanted to instead display custom error messages, you could use javascript like the following: const nameinput = document.queryselector('input'); const form = document.queryselector('form'); nameinput.addeventlistener('input', () => { nameinput.setcustomvalidity(''); nameinput.checkvalidity(); }); nameinput.addeventlistener('invalid', () => { if(nameinput.value === '') { nameinput.setcustomvalidity('enter your username!'); } else { nameinput.setcustomvalidity('usernames can only contain upper and lowercase letters.
...for this to happen, the custom validity has to be cancelled, by invoking setcustomvalidity() with an empty string value.

HTMLInputElement - Web APIs
this value can be set by the setcustomvalidity method.
... setcustomvalidity() sets a custom validity message for the element.
... the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown().

HTMLButtonElement - Web APIs
setcustomvalidity(in domstring error) void not supported for reset or button elements.
... the following methods have been added: checkvalidity(), setcustomvalidity().

HTMLFieldSetElement - Web APIs
htmlfieldsetelement.setcustomvalidity() sets a custom validity message for the field set.
... the following methods have been added: checkvalidity(), setcustomvalidity().

HTMLObjectElement - Web APIs
htmlobjectelement.setcustomvalidity() sets a custom validity message for the element.
... the following methods have been added: checkvalidity() and setcustomvalidity().

HTMLSelectElement - Web APIs
htmlselectelement.setcustomvalidity() sets the custom validity message for the selection element to the specified message.
... the methods item(), nameditem(), checkvalidity() and setcustomvalidity().

HTMLTextAreaElement - Web APIs
setcustomvalidity(domstring) sets a custom validity message for the element.
... the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange().

Index - Web APIs
1848 htmlobjectelement.setcustomvalidity api, html dom, htmlobjectelement, method, needsexample, reference, setcustomvalidity() the setcustomvalidity() method of the htmlobjectelement interface sets a custom validity message for the element.
... 1891 htmlselectelement.setcustomvalidity() api, constrain validation api, html dom, htmlselectelement, method, reference the htmlselectelement.setcustomvalidity() method sets the custom validity message for the selection element to the specified message.

HTMLKeygenElement - Web APIs
setcustomvalidity(in domstring error) void sets a custom validity message for the element.

HTMLOutputElement - Web APIs
htmloutputelement.setcustomvalidity() sets a custom validity message for the element.