Client-side form validation - Learn web development
note: there are several errors that will prevent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror.
... valuemissing: returns true if the element has a required attribute, but no value, or false otherwise.
... error showerror(); } }); form.addeventlistener('submit', function (event) { // if the email field is valid, we let the form submit if(!email.validity.valid) { // if it isn't, we display an appropriate error message showerror(); // then we prevent the form from being sent by canceling the event event.preventdefault(); } }); function showerror() { if(email.validity.valuemissing) { // if the field is empty // display the following error message.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
required validitystate.valuemissing occurs when the required attribute is present but the value is null or radio or checkbox is not checked.
...the validity object includes: validitystate.valuemissing validitystate.typemismatch validitystate.patternmismatch validitystate.toolong validitystate.tooshort validitystate.rangeunderflow validitystate.rangeoverflow validitystate.stepmismatch validitystate.badinput validitystate.valid validitystate.customerror for each of these boolean properties, a value of true indicates that the specified reason validation may have failed is true, with t...
... 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.

HTMLObjectElement.setCustomValidity - Web APIs
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 vi...

ValidityState.typeMismatch - Web APIs
if the email is required but is empty, the valuemissing will be true.

ValidityState - Web APIs
valuemissing read only a boolean that is true if the element has a required attribute, but no value, or false otherwise.

Constraint validation - Developer guides
valuemissing constraint violation step date an integer number of days unless the step is set to the any literal, the value must be min + an integral multiple of the step.

HTML attribute: required - HTML: Hypertext Markup Language
constraint validation if the element is required and the element's value is the empty string, then the element is suffering from valuemissing and the element will match the :invalid pseudo class.

<input type="checkbox"> - HTML: Hypertext Markup Language
if the checkbox has the required attribute, but is not checked, then validitystate.valuemissing will be true.