javascript - HTML5 Form validation - error message customization - Stack Overflow

admin管理员组

文章数量:1336311

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')">

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?

• javascript
• html
• input
• error-handling

Share Improve this question Follow edited Nov 4, 2016 at 9:24 Vinay 7,67477 gold badges2727 silver badges4949 bronze badges asked Oct 14, 2016 at 7:55 Mubashar AbbasMubashar Abbas 5,67344 gold badges4040 silver badges5252 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/91kc2c9a/2/

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

More on ValidityState here

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')">

本文标签： javascriptHTML5 Form validationerror message customizationStack Overflow