Question

我有一个带有这样输入的表单。

＆＃13;

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

＆＃13;

现在，默认验证消息非常有效。但我想为特定规则设置自定义消息。

即。对于像required minlength maxlength这样的规则，当每个规则都失败时，我想提供一个特定于失败规则的自定义错误消息。

我尝试了oninvalid="setCustomValidity('please enter something')"但是为每条规则设置了该消息。

如何为特定规则指定自定义错误消息？

Answer 1

使用setCustomValidity属性更改验证消息和validity属性以查找验证错误类型

validity：描述元素有效性状态的ValidityState对象。

表单加载validate属性初始化为每个表单元素，并在每次验证时更新，因为用户事件如按键，更改等Here您可以找到可能的值

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("");
  }
});

演示https://jsfiddle.net/91kc2c9a/2/

注意：由于某些未知原因，电子邮件验证不适用于上述小提琴，但在本地工作正常

有关ValidityState的更多信息here

Answer 2

当输入无效时发生oninvalid事件，在您的情况下，输入是必需的，如果输入为空，则会发生oninvalid。（见this）

是的，maxlength应该大于minlength而不是required=""，您可以简单地写required 如果你的代码是这样的（带有ID＆＃39;输入字段＆＃39;）：

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

您需要添加自定义函数以检查不同的验证并根据它们显示不同的错误。

当输入框丢失焦点并检查其要求时，validator()函数会发出声音，并且输入字段中的每个按键都会触发valdiator_two()：

＆＃13;

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);

＆＃13;

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

＆＃13;

HTML5表单验证 - 错误消息自定义

2 个答案: