Метод проверки поля setCustomValidity()

#javascript

Вопрос:

Я должен выполнить проверку поля ввода текста. Я хотел бы, чтобы 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>

Ответ №1:

Вам нужно позвонить reportValidity() input после установки пользовательского сообщения о действии.

Кроме того, вы должны вызвать 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:

Вы можете добавить <p class="error">...</p> в свой раздел div.

Скройте его с помощью 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>