Question

所以我在我的网站上有注册表格，当我试图确保每个字段都填满之后，用户才能点击注册。会发生的是，如果您只填写最后一个输入（性别），则会计入所有字段。这是我的代码：

function validateForm() {
    var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value;
    if (x == "") {
        document.getElementById("signUp").style.opacity = "0.6";
        document.getElementById("signUp").disabled = true;
        return false;
    } else {
        document.getElementById("signUp").style.opacity = "1";
        document.getElementById("signUp").disabled = false;
    }
}

这是HTML：

<form action="insert.php" method="POST" name="signUp">
  <h2 style="white-space: nowrap;font-size:3vmin;">SIGN UP AND MEET NEW PEOPLE!</h2>
  <br>
  <br>
  <input class="inputPlaceholder" type="text" name="username" id="username" onkeydown="issetcheckusername(); validateForm();" onchange='issetcheckusername(); validateForm();' placeholder="Username" maxlength="16">
  <br>
  <br>
  <input class="inputPlaceholderName" type="text" name="firstname" id="firstname" onkeydown="issetcheckfirstname(); validateForm();" onchange='issetcheckfirstname(); validateForm();' placeholder="First name">
  <input class="inputPlaceholderName" type="text" name="lastname" id="lastname" onkeydown="issetchecklastname(); validateForm();" onchange='issetchecklastname(); validateForm();' placeholder="Last name">
  <br>
  <br>
  <input class="inputPlaceholder" type="email" name="email" id="email" onkeydown="issetcheckemail(); validateForm();" onchange='issetcheckemail(); validateForm();' placeholder="E-mail">
  <br>
  <br>
  <input class="inputPlaceholder" type="password" name="password" id="password" onkeyup='issetcheckpassword(); validateForm();' onchange='issetcheckpassword();' placeholder="Password" maxlength="24">
  <br>
  <br>
  <input class="inputPlaceholder" type="password" name="passwordconfirm" onkeyup='check(); validateForm();' onchange="check(); validateForm();" id="passwordconfirm" placeholder="Confirm password" maxlength="24">
  <br>
  <br>
  <div class="inputPlaceholder" id="birthday" onchange="issetcheckbirthday(); validateForm();">
    <p style="cursor:text;display:inline;">Birthday</p>
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <select name="DOBMonth" id="DOBMonth" class="Dates" onchange="issetcheckbirthday(); validateForm();">
      <option class="inputPlaceholderBirthday">Month</option>
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>&nbsp;&nbsp;&nbsp;

    <select name="DOBDay" id="DOBDay" class="Dates" onchange="issetcheckbirthday(); validateForm();">
      <option>Day</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>

    </select>&nbsp;&nbsp;&nbsp;

    <select name="DOBYear" id="DOBYear" class="Dates" onchange="issetcheckbirthday(); validateForm();">
      <option>Year</option>
      <option value="2017">2017</option>
      <option value="2016">2016</option>
      <option value="2015">2015</option>
      <option value="2014">2014</option>
      <option value="2013">2013</option>
      <option value="2012">2012</option>
      <option value="2011">2011</option>
      <option value="2010">2010</option>
      <option value="2009">2009</option>
      <option value="2008">2008</option>
      <option value="2007">2007</option>
      <option value="2006">2006</option>


    </select>
  </div>
  <br>
  <div class="inputPlaceholder" id="gender">
    <p style="display:inline;">Gender</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="gender" value="1" id="gender" onchange="issetcheckgender(); validateForm();"> Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="gender" value="0" id="gender" onchange="issetcheckgender(); validateForm();"> Female
  </div>
  <br>
  <input class="inputPlaceholderFinish" id="signUp" type="submit" value="Sign Up" style="width:80%" disabled>
</form>

我显然已经遗漏了几年和几天，所以它不会太长（对于这篇文章）我很抱歉这些角色到目前为止。

Answer 1

问题在于获得价值的方式：

var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value;

这不是获取所有表单字段值的正确方法。

您需要遍历它们并检查是否已设置完毕：

let allFilled = true;

for (let i = 0; i < document.forms["signUp"].length ; ++i){
    if (document.forms["signUp"][i].value == ""){
         allFilled = false; //if any is not set mark the flag as false
         break; //and stop checking any other inputs
    }
}

if (!allFilled) {
    document.getElementById("signUp").style.opacity = "0.6";
    document.getElementById("signUp").disabled = true;
    return false;
} else {
    document.getElementById("signUp").style.opacity = "1";
    document.getElementById("signUp").disabled = false;
    return true; //was missing here
}

作为旁注，我强烈建议您在javascript端添加事件监听器。它可以帮助您保持组织有序，并且将来更容易更改。它还可以简化设置监听器的过程。

输入最后一个字段时启用注册按钮

1 个答案: