表单验证设置自定义有效性答案

【问题标题】：Form Validation Set Custom Validity表单验证设置自定义有效性
【发布时间】：2018-06-18 11:57:45
【问题描述】：

我在玩表单验证。我已经建立了一个简单的验证码字段，我想通过 javascript 检查它。

此时它是静态的。我需要添加一个事件监听器，但不知道怎么做。

希望您能帮上忙。

HTML

<form>
  <input type="text" id="field_robot" name="">
  <input type="submit" id="submit" name="submit">
</form>

var val = document.getElementById('field_robot').value;
var field = document.getElementById('field_robot');

field.addEventListener('input', function(){
  if (val != '42') {
    field.setCustomValidity('invalid');
  } 
});

【问题讨论】：

您的问题到底是什么？
感谢您的回答。我想要验证输入字段。每次更改“field_robot”字段的输入时，应检查输入是否为 42。
您可以在输入字段中添加一个 onInput 属性。并添加带有验证的功能

标签： javascript html forms validation

【解决方案1】：

问题是您在事件侦听器之外声明 val。因此，您的值在输入后永远不会刷新。您需要在事件侦听器中检索字段的值。

见下面的sn-p：

var field = document.getElementById('field_robot');

field.addEventListener('input', function() {
  var val = document.getElementById('field_robot').value;
  if (val != '42') {
    field.setCustomValidity('invalid');
  } else {
    event.target.setCustomValidity('');
  }
});

<form id="myForm">
  <input type="text" id="field_robot" name="">
  <input type="submit" id="submit" name="submit">
</form>

现在，您可以更进一步，使用侦听器提供的event 对象和将您的事件和布尔条件作为参数的fieldValidator 函数使用一个可用于多个输入字段的侦听器.

查看其他 sn-p ：

var field = document.getElementById('field_robot');

field.addEventListener('input', function(event) {
    fieldValidator(event, (field.value == '42'));
});

function fieldValidator(event, condition) {
    var val = event.target.value;
    if (!condition) {
        event.target.setCustomValidity('invalid');
    } else {
        event.target.setCustomValidity('');
    }

}

<form id="myForm">
      <input type="text" id="field_robot" name="">
      <input type="submit" id="submit" name="submit">
</form>

【讨论】：

Input 是标准事件 - html.spec.whatwg.org/multipage/indices.html#event-input-input
@catalin 你是对的。我更新了。感谢您指出这一点。
一件额外的事情。您还可以在提交按钮单击事件上对所有元素进行表单验证。这样您就可以将验证集中到一个地方。
虽然您是对的，但 OP 要求在更改输入内容时进行验证，而不是在提交表单时：“每次更改“field_robot”字段的输入时，它应该检查，如果输入是 42。"。

【解决方案2】：

所以现在效果很好。

  var field = document.getElementById('field_robot');

  field.addEventListener('change', function() {
  var val = document.getElementById('field_robot').value;
  if (val != '42') {
    field.setCustomValidity('invalid');
  } else {
    field.setCustomValidity('');
  };
});

【讨论】：