HTML5 form required attribute. Set custom validation message?

javascript html forms validation
Skizit picture Skizit · Mar 11, 2011 · Viewed 572.4k times · Source

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/

Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot be left blank"?

EDIT: Also note that the type password field's error message is simply *****. To recreate this give the username a value and hit submit.

EDIT: I'm using Chrome 10 for testing. Please do the same

Answer

Somnath Kadam picture Somnath Kadam · Nov 25, 2013

Here is the code to handle custom error message in HTML5:

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

This part is important because it hides the error message when the user inputs new data:

oninput="this.setCustomValidity('')"

Related questions

How to Call a JS function using OnClick event

I am trying to call my JS function that I added in the header. Please find below code that shows my problem scenario. Note: I don't have access to the body in my application. Everytime I click on the element …

Read More
How to show setCustomValidity message/tooltip without submit event

I'm using forms basic validation to check if email is correct format, then the data is sent by Ajax where it checks if email address is already in use and did the user select country/state or left default values …

Read More
How to enable a disabled text field?

I wanna know how do I enable a disabled form text field on submit. Also I wanna make sure if user goes back to form or click reset field will show again as disabled. I tried to use document.pizza.…

Read More