How to keep validation but prevent form submit? JQuery

Question

I have few forms on my single page app. All forms use the same function for submitting data. In order to use HTML5 validation I had to change input type from button to submit . Now if I click on the Submit button I can see validation message but my form is still submitted. How I can prevent from submit and keep my validation? Here is example of my form:

<form name="myForm" id="myForm" method="POST" action="#">
    <fieldset>
        <legend>User Info</legend>
        <div class="formItem">
            <label for="last_name">Last Name:</label>
            <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
        </div>
        <div class="formItem">
            <label for="first_name">First Name:</label>
            <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
        </div>
        <div class="formItem">
            <label for="dob">DOB:</label>
            <input type="text" name="frmst_dob" id="frmst_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" class="datepick" required/>
        </div>
        <div class="formItem">
            <p align="center"><input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit"></p>
        </div>
    </fieldset>
</form>

And here is example of my function for Submit button:

$('input[name="frmSubmit"]').on('click', function(){
   var formData = $('#'+frmID).serialize(); 
   $.ajax({
        type: 'POST',
        url: 'App.cfc?method=updateRecord',
        data: formData,
        dataType: 'json'
    }).done(function(obj){
        //handle call back  
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
    });
});

All form have same name for submit button. My JQuery selector use that name to submit the form. If anyone knows how I can keep the same logic/function that I already have and prevent from submit please let me know.

Answer 1

You're using click for your event, which means your function will run on each click. Look into using the submit event instead. This should prevent the function from running until the form is submitted, which it can't do if there are HTML5 validation errors.
[EDIT] And for clarification, you would also change your event listener to be watching the form element, not the button. So:

$('#myForm').on('submit', function... etc. 

Answer 2

you can use onSubmit property of form tag

 function submitForm() { var formData = $('#'+frmID).serialize(); $.ajax({ type: 'POST', url: 'App.cfc?method=updateRecord', data: formData, dataType: 'json' }).done(function(obj){ //handle call back }).fail(function(jqXHR, textStatus, errorThrown){ alert(errorThrown); }); } 

 <form name="myForm" id="myForm" onSubmit="submitForm();" method="POST" action="#"> <fieldset> <legend>User Info</legend> <div class="formItem"> <label for="last_name">Last Name:</label> <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> </div> <div class="formItem"> <label for="first_name">First Name:</label> <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> </div> <div class="formItem"> <label for="dob">DOB:</label> <input type="text" name="frmst_dob" id="frmst_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" class="datepick" required/> </div> <div class="formItem"> <p align="center"><input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit"></p> </div> </fieldset> </form> 

Answer 3

Can you do like this

It would be better if you change input type to button because you are not submitting form you are sending ajax request.

First make different js script for validation and put the condition before calling ajax.

if(valid) call the ajax u calling already if not return false