CODEWITHSUNDEEP
javascripthtmlforms
EF_1000
EF_1000

Reputation: 45

Form field validation issue

I want to highlight the form fields that are empty and prompt the end-user to fill in the missing fields before submitting a form.

Currently when I click the submit button, it is highlighting the empty fields but then it bypasses the prompt and submitting the form anyway. Is there a way to make sure that the user fills in the form first before submitting the form? Also do I need to combine the following functions as they appear to be operating separately.

See the code snippet below:

//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>

Upvotes: 0

Views: 57

Answers (1)

Sandip Subedi
Sandip Subedi

Reputation: 1077

Do what @FrankerZ said if you would like to stay with the current code.

Alternatively : You can use required tag from HTML5 and not worry about that. It will look something like this :

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

learn more here: http://www.w3schools.com/tags/att_input_required.asp

Upvotes: 1

Related Questions