Change Required Field Notification For Free

Change required message html Code Answer's<input type="text" id="username" required placeholder="Enter Name"oninvalid="this.setCustomValidity('Enter User Name Here')"oninput="this.setCustomValidity('')" />

To change the required message, pass in an additional parameter to the addValidator line, containing an array of options with your message, the syntax and array nesting is important. Copying the code here is a good idea, just be sure to change $element to match your element's unique name.

Creating A Custom HTML5 Form Validation<form> <input type="text" required> <input type="submit" value="Submit"> </form><form> <input id="username" type="text" pattern="a-zA-Z0-9_-{6,12}" autofocus required> <input id="submit" type="submit" value="create"> </form>:valid { color: green; } :invalid { color: red; }More items...?Nov 21, 2012

Change default required message html5 Code Answer's<input type="text" id="username" required placeholder="Enter Name"oninvalid="this.setCustomValidity('Enter User Name Here')"oninput="this.setCustomValidity('')" />

The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Replacing the Default HTML5 Validation MessageBegin by adding an id to the input element, so as to be able to select it conveniently. var input = document. getElementById( 'username' ); Lastly, we specify the message used when the input shows its invalid state.

It is required to set validity message to blank once control reveives input else first executed validity message will be displayed for all fields. Add oninput="setCustomValidity('')" whenever calling setCustomValidity(). +1 to Somnath's answer.