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

Question

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

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

现在默认验证消息效果很好。但我想为特定规则设置自定义消息。

即对于像 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 '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')">

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

validator() 函数在输入框失去焦点并检查其要求时触发，valdiator_two() 在输入字段中的每次按键时触发：

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