CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
sjohn285
sjohn285

Reputation: 405

HTML Form Submits Even After Setting OnSubmit To False

I have a form that I can't get to stop submitting, no matter what. I've looked at some similar questions on SO but none have worked for me. This seems like such a simple task. The reason why I need it to stop submitting is because I would like to add some validation if a field is left empty.

HTML

<form class="application-form" id="application-form" name="application-form" 
autocomplete="off" enctype="multipart/form-data" method="post" onsubmit="return validateForm()" action="AppProcessRequest.cshtml">
...
...
...
<!-- Verify/Submit --> 
<input type="submit" value="Submit" id="btnSubmit" name="submitButton"/>
</form>

JavaScript

function validateForm() {
    alert('False');
    return false;
};

My Ideal Pseudo-Script

function validateForm() {
    var emp1label = $('label[class=emp1label]')
    if(emp1label.length > 0){
        alert('Empty Field.');
        return false;
    }else{
        return true;
    }
};

Note: The alert does popup when clicking submit, but the form still posts after closing the message.

Upvotes: 0

Views: 89

Answers (3)

sjohn285
sjohn285

Reputation: 405

The reason why the form was still being submitted was because of jquery-validation having it's own submit function. This was overriding any changes that I made to try and stop the submit.

Upvotes: 0

Mamun
Mamun

Reputation: 68933

The problem might be in the new line between return and validateForm():

function validateForm() {
    alert('False');
    return false;
};
<form class="application-form" id="application-form" name="application-form" 
autocomplete="off" enctype="multipart/form-data" method="post" onsubmit="return validateForm()" action="AppProcessRequest.cshtml">
  ...
  ...
  ...
  <!-- Verify/Submit --> 
  <input type="submit" value="Submit" id="btnSubmit" name="submitButton"/>
</form>

Upvotes: 1

LDMdev
LDMdev

Reputation: 1310

You have to use preventDefault() to prevent the default action.

function validateForm(evt) {
    evt.preventDefault();
    alert('False');
    return false;
};

Upvotes: 1

Related Questions