如何防止提交但仍验证必填字段？

Question

I have a form, and when is submitted I prevent it with e.preventDefault() , but I still want the browser to validate the required fields before I make the AJAX call.

I don't want to get fancy with javascript validation, I just want the browser to validate the required fields (HTML5).

How can I achieve this?

Answer 1

It works, even if you don't do the checkValidity check. In chrome, it won't call the submit function on the form if form is not valid:

$(document).ready(function(){
    $("#calendar_form").submit(function(e){
        e.preventDefault();
        calendarDoAjax();
    });

    function calendarDoAjax(){
        var proceed = false;
        if( $("#calendar_form")[0].checkValidity ){
            if ($("#calendar_form")[0].checkValidity()) {
                proceed = true;
            }
        }else{
            proceed = true;
        }
        if (proceed) {
            //Do ajax call
        }
    }

});

Answer 2

Add this in the end of your submit function:

if (evt && evt.preventDefault) {
    evt.preventDefault();
} else if (event) {
    event.returnValue = false;
}

return false;

And pass the var evt in your function like this:

function(evt) { /* Your Code */ }