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

Question

我有一个表单，提交时我用e.preventDefault() 阻止它，但我仍然希望浏览器在我进行 AJAX 调用之前验证必填字段。

我不想花哨的 javascript 验证，我只想让浏览器验证必填字段 (HTML5)。

我怎样才能做到这一点？

Answer 1

即使您不进行checkValidity 检查，它仍然有效。在chrome中，如果表单无效，它不会调用表单上的提交函数：

$(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

在提交函数的末尾添加：

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

return false;

并像这样在你的函数中传递 var evt：

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