验证并返回red

Question

我尝试检查所有为空的输入框，以便在该空框上显示红色圆角

但是我不知道为什么它不适合我，我的javascript有一个问题。

我需要在我的javascript帮助，以验证所有输入框，然后再提交

​

function validateForm() {
  // This function deals with validation of the form fields
  var y, i, valid = true;
  y = document.getElementsByTagName("input");
  // A loop that checks every input field 
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  return valid; // return the valid status
}

/* Mark input boxes that gets an error on validation: */

input.invalid {
  background-color: #ffdddd;
}

<form id="regForm" action="/action_page.php" onsubmit="return validateForm()">
  <h1>Register:</h1>
  <div>Name:
    <p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
    <p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
  </div>

  <input type="button" value="submit" onclick="sndm">

</form>

​

Answer 1

不需要使用字符串比较来查找空字段。HTML为此提供了required-attribute，并将其反映在element.validity对象中。

​

const textInputs = document
  .getElementById('regForm')
  .querySelectorAll('input[type="text"]');

function validateForm() {
  return textInputs.every(input => input.validity.valid)
}

/* Mark input boxes that gets an error on validation: */

input:invalid {
  background-color: #ffdddd;
}

<form id="regForm" action="/action_page.php" onsubmit="return validateForm()">
  <h1>Register:</h1>
  <div>Name:
    <p><input placeholder="First name..." name="fname" required type="text"></p>
    <p><input placeholder="Last name..." name="lname" required type="text"></p>
  </div>

  <input type="submit" value="submit">
</form>

​

为了防止表单提交时出现空域，你甚至不需要Javascript：

​

/* Mark input boxes that gets an error on validation: */

input:invalid {
  background-color: #ffdddd;
}

<form id="regForm" action="/action_page.php">
  <h1>Register:</h1>
  <div>Name:
    <p><input placeholder="First name..." name="fname" required type="text"></p>
    <p><input placeholder="Last name..." name="lname" required type="text"></p>
  </div>

  <input type="submit" value="submit">
</form>

​

Answer 2

您可以使用HTML的默认属性"required“来验证表单，并提供默认的工具提示，使其使用起来更加友好，这也可以防止提交无效的表单。

如下例所示：

CSS

input:invalid {
  background-color: #ffdddd;
}

HTML

  <form id="regForm" action="/action_page.php" onsubmit="return validateForm()">
      <h1>Register:</h1>
      <div>Name:
        <p><input type="text" placeholder="First name..." required name="fname"></p>
        <p><input type="text" placeholder="Last name..." required name="lname"></p>
      </div>
      <input type="submit" value="submit">
    
    </form>