Why isn't the form submitting after validation

Question

HTML:

<form method="post" name="contact" id="frmContact" action="smail.php">

    ...

    <label for="security" class="smallPercPadTop">Please enter the result:</label> <br /><h3 id="fNum" class="spnSecurity"></h3><h3 id="nCalcType" class="spnSecurity"></h3><h3 id="sNum" class="spnSecurity"></h3> = <input type="text" placeholder="Enter the result" name="security" id="security" class="required input_field_custom" />

    <br /><br />

    <input type="submit" value="Send" id="submit" name="submit" class="submit_btn" />
    <input type="reset" value="Reset" id="reset" name="reset" class="submit_btn" />
</form>

Script:

$('form').on('submit', function(e) {
    e.preventDefault();
    var vGetResult = $("#security").val();
    if (vGetResult == vResult) { //""vResult"" is a value that I set when the page loads...
        alert("good");
        $("#frmContact").submit();
    }
});

What I am trying to do is, once I validate what the user entered is the same as another number then I would like to submit the form. Instead of submitting the form, I keep getting the alert statement infinitely.

How can I fix it?

Answer 1

Move e.preventDefault() to else block when the validation condition fails. Also you don't need to resubmit the form using $("#frmContact").submit()

$('form').on('submit', function(e) {        
    var vGetResult = $("#security").val();
    if (vGetResult == vResult) { //""vResult"" is a value that I set when the page loads...
        alert("good");
        //$("#frmContact").submit();
    }else{
        e.preventDefault();
    }
});

Or, you just modify statement as

$('form').on('submit', function(e) {        
    var vGetResult = $("#security").val();
    if (vGetResult !== vResult) { //""vResult"" is a value that I set when the page loads...
        e.preventDefault();
    }

    alert("good");
});

Answer 2

Your form goes in infinite loop. try this simple code.

$('form').on('submit', function(e) {
  var vGetResult = $("#security").val();
  if (vGetResult != vResult) 
   {
      e.preventDefault();
   }
});

Answer 3

Return true to allow the form to submit or false to suppress :

$('#frmContact').on('submit', function(e) {
    if ($("#security").val() == vResult) {
        alert("good");
        return true;
    } else {
        return false;
    }
});

Or, if the alert is not needed :

$('#frmContact').on('submit', function(e) {
    return $("#security").val() == vResult;
});

Answer 4

You can let the jQuery event get prevented ...and trigger the native event

Just change

$("#frmContact").submit();

To

$("#frmContact")[0].submit();