javascript - 表单字段验证问题

Question

我想突出显示空白的表单字段，并提示最终用户在提交表单之前填写缺失的字段。

目前，当我单击提交按钮时，它会突出显示空白字段，但随后它会绕过提示并提交表单。有没有办法确保用户在提交表单之前先填写表单？我还需要组合以下功能，因为它们似乎是单独操作的。

请参阅下面的代码片段:

//JS

**<script>

        function myFunction() {
            document.getElementById("onlinepensionform_submit.asp").submit();
        }
</script>**  

**<script>

    function formcheck() {
        var fields = $(".ff-item-required")
        .find("select, textarea, input").serializeArray();

            $.each(fields, function(i, field) {
        if (!field.value)
      alert(field.name + ' is required');
   }); 
  console.log(fields);
}

</script>**  

// HTML

<form name="onlinepensionform" action="onlinepensionform_submit.asp" id="onlinepensionform_submit.asp" method="post"> 

<TR class="ff-item-required"><TD width="253"><label for="FinancialInstitutionName">Financial Institution: </label> </TD><TD width="672"><span id="sprytextfield1">
      <input name="FinancialInstitutionName" type="text"  id="FinancialInstitutionName" value="" />

                <TR class="ff-item-required"><TD> <label for="AccountName">Account name: </label></TD><TD>
        <input name="AccountName"  type="text"  id="AccountName" value="" />
                  </TD></TR>
                                   <TR class="ff-item-required"><TD> <label for="BsbNumber">BSB Number: </label></TD><TD>
                       <input name="BsbNumber"  type="text"  id="BsbNumber" value="" />
                  </TD></TR>
                <TR class="ff-item-required"><TD>  <label for="AccountNumber">Account Number: </label></TD><TD>
        <input name="AccountNumber"  type="text"  id="AccountNumber" value="" />

                  <BR /><BR />

                      </TD></TR>


<input type="button" onclick="myFunction(); formcheck(); return false" value="Submit form">

</form>

Answer 1

如果您想保留当前代码，请按照 @FrankerZ 所说的操作。

或者:您可以使用 HTML5 中的 required 标签，而不必担心这一点。它看起来像这样:

<input type="text" name="firstName" required>

在这里了解更多: http://www.w3schools.com/tags/att_input_required.asp