check if form is submitted successfully html5

Question

I have following code.

<div class="form-group">
    <label for="store_account_name">Store Title</label>
    <input type="text" value="" class="form-control" name="store_account_name" id="store_account_name" placeholder="Please insert store title of the external store" required />
</div>
<div class="form-group">
    <label for="store_url">Store URL</label>
    <input type="url" value="" class="form-control" name="store_url" id="store_url" placeholder="Please insert store URL as described in help section" required />
</div>

On submit button I want to check if form is validated. I have an listner event which has preventDefault button. So I want to send ajax call only when both of these inputs are successfully validated. Is there any JS function to check the status of validation or any css property is add to invalid field.

Answer 1

You should use the form's onsubmit event. It sounds like you are listening on the submit button's click event which isn't right.

The form's submit event will only fire if the form is valid. The HTML5 validation rules will prevent this event from firing if the form is invalid.

jsFiddle demo

$('#myform').submit(function(e){
    e.preventDefault();

    // do ajax now
    console.log("submitted"); 
});