HTML5 Form validation - error message customization

Question

I have a form with an input like this.

<input type="text" name="question" class="form-control" required="" minlength="4" maxlength="2" size="20" oninvalid="setCustomValidity('please enter something')">

Now the default validation messages work great. But I want to set custom messages for specific rules.

i.e. for rules like required minlength maxlength when each fails I want to provide a custom error message specific to the rule that failed.

I have tried oninvalid="setCustomValidity('please enter something')" but that sets that message for every rule.

How can I specify custom error messages for specific rules?

Vinay · Accepted Answer · 2016-10-14 12:42:27Z

5

Use setCustomValidity property to change validation messages and validity property to find type of validation error

validity : A ValidityState object describing the validity state of the element.

Upon form load validate property is initialized for each form element and updated on every validation due to user events like keypress,change etc. Here you can find the possible values

var email = document.getElementById("mail");

if (email.validity.valueMissing) {
  email.setCustomValidity("Don't be shy !");
}
else{
  event.target.setCustomValidity("");
}

email.addEventListener("input", function (event) {

  if (email.validity.valueMissing) {
    event.target.setCustomValidity("Don't be shy !");
  }
  else{
    event.target.setCustomValidity("");
  }
});

Demo https://jsfiddle.net/91kc2c9a/2/

Note: For some unknown reason email validation is not working in the above fiddle but should work fine locally

1 Comment

Mubashar Abbas Over a year ago

yes that is what i was looking for. your references help thanks.

Towkir · Accepted Answer · 2016-10-14 10:40:06Z

1

The oninvalid event occurs when the input is invalid, in your case, the input is required and if it is empty, oninvalid will occur. (see this)

And yes, maxlength should be bigger than minlength and instead of required="" you can simply write required if your code is like this (with an ID 'input-field'):

<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">

You will need to add custom functions to check different validation and display different errors based on them.

The validator() function bellow triggers when the input box loses focus and checks for its requirements, and the valdiator_two() is triggered on every keypress in the input field:

var field = document.getElementById("input-field");
function validator(){
    if (field.value === "") {
      alert("You can't leave this empty");
    }
    if (field.value !== "" && field.value.length < 4){
      alert("You have to enter at least 4 character");
    } 
}

function validator_two(){
    if (field.value.length >= 8){
      alert("You can't enter more than 8 character");
    }
}

field.addEventListener("blur", validator);
field.addEventListener("input", validator_two);

<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">

answered Oct 14, 2016 at 10:40

Towkir

4,0142 gold badges27 silver badges43 bronze badges

2 Comments

Mubashar Abbas Over a year ago

thanks but my question was about how can i customize the default error messages.. I am now using custom validation using jquery for now, because using custom error messages was a requirement for my project.

Towkir Over a year ago

In that case, does the first answer from Novice help ?

Collectives™ on Stack Overflow

HTML5 Form validation - error message customization

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related