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中的必需标记，而不用担心。它看起来像这样：

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

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

表单字段验证问题

1 个答案: