如何修复联系表格不进行下一次验证

Question

前两个标题和名称验证有效，但每次刷新页面时也有问题。

但是在名称通过验证之后，电子邮件将不会通过验证，其他所有电子邮件（例如，保管箱，复选框和msg，如果为空）也将得到验证。

代码

function checkData() {


  if (document.signup.TITLE.value == "") {
    alert("Please select your Title.")
    document.signup.TITLE.focus()
    return false;

  }

  if (document.signup.NAME.value == "" || document.signup.NAME.value.length < 2 || isNaN.document.signup.NAME.value) {
    alert("Please fill in your Name.")
    document.signup.NAME.focus()
    return false;

  }




  if (document.signup.EMAIL.value == "") {
    alert("Please fill in your E-Mail address.")
    document.signup.EMAIL.focus()
    return false;

  }

  if (document.signup.ENQ.value == "") {
    alert("Please select your Enquiry.")
    document.signup.ENQ.focus()
    return false;

  }

  if (document.signup.INS.value == "") {
    alert("Please select your Insurance.")
    document.signup.INS.focus()
    return false;

  }
  if (document.signup.MSG.value == "") {
    alert("Please type in your Message.")
    document.signup.MSG.focus()
    return false;

  } else {

    return true;
  }



}

<form name="signup" onsubmit="return checkData()">

  <td>
    Title:*
  </td>

  <td>
    <input type="radio" name="TITLE" value="TITLE">Mr
    <input type="radio" name="TITLE" value="TITLE">Mrs
    <input type="radio" name="TITLE" value="TITLE">Miss
    <input type="radio" name="TITLE" value="TITLE">Ms
  </td>

  <tr>

    <td>Your Name: </td>

    <td>
      <input name="NAME" type="text" id="NAME" />

    </td>

  </tr>

  <tr>
    <td>E-Mail:</td>
    <td>
      <input name="EMAIL" type="text" id="EMAIL" />
    </td>
  </tr>
  <!-------->
  <tr>
    <td>
      Enquiry:*
    </td>
    <td>

      <select>
        <option name="ENQ" value="S">Select Option</option>
        <option name="ENQ" value="sg">Suggestion</option>
        <option name="ENQ" value="sg">Complaint</option>
        <option name="ENQ" value="sg">Cancellation</option>
      </select>


      </div>
      </div>
    </td>
  </tr>

  <!-------->
  <tr>
    <td>
      Select Insurance
    </td>

    <td>
      <div id="checkboxes">
        <input type="checkbox" name="INS" id="INS" value="INS" />Insuarance
        <label for="one"><input type="checkbox" name="INS" id="INS"/>Fees</label>
        <label for="one"><input type="checkbox" name="INS" id="INS"/>Black Box</label>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      Message:
    </td>

    <td>
      <textarea name="MSG" rows="5" cols="80" id "MSG"></textarea>

    </td>
    <tr>

      <tr>
        <td></td>

        <td>
          <input type="submit" value="Email This Form">
        </td>

      </tr>



</form>

以下是代码：https://codepen.io/anon/pen/qwWPwq

Answer 1

您的代码在到达电子邮件验证程序之前就被破坏了。您的姓名检查存在一些问题。

if (document.signup.NAME.value == "" || document.signup.NAME.value.length < 2 || isNaN.document.signup.NAME.value )

isNaN是一个函数，但是您在使用它的方式意味着它具有一些document属性，而该属性没有，因此在您检查电子邮件之前运行代码会中断甚至发生。您的第三个条件应写为：

isNaN(document.signup.NAME.value)

但是，虽然现在是正确的语法，但这不是您应该使用的验证检查。根据{{​​3}} isNan()始终返回字符串的true，因此此检查总是认为您的姓名无效。删除它，这样您就可以：

if (document.signup.NAME.value.trim() == "" || document.signup.NAME.value.length < 2)

编辑 您的ENQ和保险支票似乎也有一些问题。我在下面修改了它们。我还向所有空字符串检查中添加了trim()，以防止仅空格输入得到验证。 JSFiddle：documentation

document.querySelector('[name="signup"]').addEventListener('submit', function(e) {
  e.preventDefault();
  checkData();
})

function checkData() {
  if (document.signup.TITLE.value == "") {
    alert("Please select your Title.")
    document.signup.TITLE.focus()
    return false;

  }

  if (document.signup.NAME.value.trim() == "" || document.signup.NAME.value.length < 2) {
    alert("Please fill in your Name.")
    document.signup.NAME.focus()
    return false;
  }

  if (document.signup.EMAIL.value.trim() == "") {
    alert("Please fill in your E-Mail address.")
    document.signup.EMAIL.focus()
    return false;

  }

  if (document.signup.ENQ.value == "S") {
    alert("Please select your Enquiry.")
    document.signup.ENQ.focus()
    return false;

  } 

  if (!document.signup.INS.checked && !document.signup.FEES.checked && !document.signup.BB.checked) {
    alert("Please select your Insurance.")
    document.signup.INS.focus()
    return false;

  }
  if (document.signup.MSG.value.trim() == "") {
    alert("Please type in your Message.")
    document.signup.MSG.focus()
    return false;

  }

  return true;
  
}

<form name="signup">
  <td>
    Title:*
  </td>

  <td>
    <input type="radio" name="TITLE" value="TITLE">Mr
    <input type="radio" name="TITLE" value="TITLE">Mrs
    <input type="radio" name="TITLE" value="TITLE">Miss
    <input type="radio" name="TITLE" value="TITLE">Ms
  </td>

  <tr>

    <td>Your Name: </td>

    <td>
      <input name="NAME" type="text" id="NAME" />

    </td>

  </tr>

  <tr>
    <td>E-Mail:</td>
    <td>
      <input name="EMAIL" type="text" id="EMAIL" />
    </td>
  </tr>
  <!-------->
  <tr>
    <td>
      Enquiry:*
    </td>
    <td>

      <select name="ENQ" id="ENQ">
        <option name="ENQ" value="S">Select Option</option>
        <option name="ENQ" value="sg">Suggestion</option>
        <option name="ENQ" value="sg">Complaint</option>
        <option name="ENQ" value="sg">Cancellation</option>
      </select>

  <!-------->
  <tr>
    <td>
      Select Insurance
    </td>

    <td>
      <div id="checkboxes">
        <input type="checkbox" name="INS" id="INS" value="INS" />Insuarance
        <label for="one"><input type="checkbox" name="FEES" id="FEES"/>Fees</label>
        <label for="one"><input type="checkbox" name="BB" id="BB"/>Black Box</label>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      Message:
    </td>

    <td>
      <textarea name="MSG" rows="5" cols="80" id "MSG"></textarea>

    </td>
    <tr>

      <tr>
        <td></td>

        <td>
          <input type="submit" value="Email This Form">
        </td>

      </tr>

</form>