Question

我有这些JQuery函数：

function CheckRequired() {
    $(".required").each(function(event) {
        var check = $(this).val();

        if(check == '') {
            event.preventDefault();
            alert("One or more fields cannot be blank");
            //alert($(this).attr("id"));
            return false;
        }
        return true;
    });
}

$(document).ready(function() {
    $("form").each(function() {
       $(this).submit(function(event) {
           CheckRequired();
       });
    });
});

所以我的必填字段有一个required类，但在提交表单时，它显示alert错误，但仍然提交表单

如果出现错误，我怎么能阻止它提交表单

Answer 1

未从提交处理程序返回CheckRequired（）的结果。

return CheckRequired();

您也可以将事件传递给该函数，如果您不希望提交发生，请在CheckRequired内部执行

event.preventDefault();

我将重做代码块...

function CheckRequired(event) {
    var $form = $(this);

    if ($form.find('.required').filter(function(){ return this.value === '' }).length > 0) {
        event.preventDefault();
        alert("One or more fields cannot be blank");
        return false;
    }
}

$(document).ready(function () {
    $('form').on('submit', CheckRequired);
});

Answer 2

试试这个：

$(document).ready(function() {
  $("form").submit(function(event) {
     if ( !CheckRequired() ){
       event.preventDefault();
     }
  });
});

我在代码中嗅到了bug。您正在遍历每个表单，并且为了检查需要，您正在对.required

进行全局查找

这里是你可以对CheckRequired函数做的小重构：

function CheckRequired() {

    var field_with_empty_ip = $(".required").filter(function(){
       return ( $(this).val() == "" );
    });

    return ( field_with_empty_ip.length < 0 );

}

表单上的JQuery提交检查必填字段

2 个答案: