验证字段 setCustomValidity() 方法答案

【问题标题】：Validation field setCustomValidity() method验证字段 setCustomValidity() 方法
【发布时间】：2021-07-01 13:42:00
【问题描述】：

我必须验证输入文本字段。我希望 Js 通过 setCustomValidity() 方法显示错误消息。有可能吗？

function checkName() {
  var x = document.formUser;
  var input = x.name.value;
  if (input.length < 3) {
    input.setCustomValidity('This field is invalidate');
    return false;
  }
}

<form name="formUser" id="formUser" action="#" method="POST" onsubmit="return validateForm();">
  <div class="section">
    <label for="fname">Nome</label>
    <input class="form-control" type="text" id="name" required>
  </div>
  <input type="submit" class="btn btn-primary" value="Invia" onclick="validateForm();">
</form>

【问题讨论】：

谁在打电话给checkName？

标签： javascript

【解决方案1】：

设置自定义有效性消息后，需要在input上调用reportValidity()。

此外，您必须在同一元素上调用 reportValidity 方法，否则不会发生任何事情。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity#examples

function checkName() {
  const inp = document.getElementById('name');
  const val = inp.value;
  if (val.length < 3) {
    inp.setCustomValidity('This field is invalidate');
    inp.reportValidity();
    return false;
  }
}

<form name="formUser" id="formUser" action="#" method="POST" onsubmit="return checkName();">
  <div class="section">
    <label for="fname">Nome</label>
    <input class="form-control" type="text" id="name" required>
  </div>
  <input type="submit" class="btn btn-primary" value="Invia" onclick="checkName();">
</form>

【讨论】：

【解决方案2】：

我想用 javascript 控制更多的文本输入。 setCustomValidity() 方法意味着如果输入少于三个字符，它将必须显示错误消息。它并不总是有效。例如。如果我在第一个字段中放置一个字符的字符串，在第二个字段中放置一个四个字符的字符串；它发送而不显示错误。如果我重复相同的测试，它会起作用。为什么？

    window.onload = function() {
  const field = document.getElementsByClassName("input-field");
  for (let i = 0; i < field.length; i++) {
    field[i].addEventListener('input', function() {
      const val = field[i];
      if (val.length < 3) {
        field[i].setCustomValidity('Field is invalid');
      }
    })
  }
}
      <form name="formUser" id="formUser" action="#">
<div class="section">
  <label for="fname">First name</label>
  <input class="form-control input-field" type="text" id="fname" required>
  <label for="lname">Last name</label>
  <input class="form-control input-field" type="text" id="lname" required>
</div>
<input type="submit" class="btn btn-primary" value="Send">

【讨论】：

【解决方案3】：

您可以在您的部分 div 中添加 <p class="error">...</p>。

用 css 隐藏它（显示：无），当你在验证中遇到错误时，添加一个类到那个

喜欢“显示”来显示它（显示：未设置）。

【讨论】：

【解决方案4】：

您可以像这样使用 Javascript 进行自定义表单验证。在这里，我刚刚添加了一个带有警告和警告框的 div。你可以为所欲为。

如果您在字段为空时单击提交，它将发出警告。

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  let alertBox = document.getElementById("alert-box");
  // Here instead of checking (x == " "), you can use your custom validations
  if (x == "") {
 
    alertBox.innerHTML = `<p>Form input are empty</p>`;  // appends a div with warning
    alert("Name must be filled out");  // alert box
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>
<div id="alert-box"> </div>
<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

【讨论】：

反对票是因为你根本不使用setCustomValidity，这是 OP 要求的。