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

Question

前两个标题和名称验证工作，但它也每次刷新页面，这也是一个问题。

但是，在名称获得验证后，电子邮件不会得到验证，所有其他邮件也会像Dropbox，checkbox和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)

但是现在这是正确的语法，这不是您应该使用的验证检查。根据documentation isNan()总是为字符串返回true所以这个检查总是认为你的名字无效。删除它，所以你只需：

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

编辑您的ENQ和保险检查似乎也存在一些问题。我在下面修改了它们。我还将trim()添加到所有空字符串检查中，以防止仅通过验证输入空白。 JSFiddle：https://jsfiddle.net/z3aso7u0/

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>