jquery - 使用 jQuery each() 循环遍历输入元素

Question

我写了一些代码，基本上将处理程序附加到 onsubmit 事件，但是有一个我不知道如何修复的错误。问题是当表单中的输入字段为空，并且代码进入if块时，它没有t在return语句后停止，下面的ajax代码也被执行了，但我不明白为什么？

$('document').ready(function() {
  $('form').bind('submit', function(event) {

        event.preventDefault();
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                return;
            }
        });


        $.ajax({
            url: 'http://example.com/',
            dataType: 'json',
            type: 'GET',

         });
  });
});

Answer 1

当您告诉 JavaScript 退出 each() 块而不是 bind 块时。处理此问题的一种方法是，如果 val() 为空，则在每个块期间将布尔值设置为 false。在每个块完成后，您可以检查布尔值并提交表单，如果它仍然为真。请参见下面的代码示例：

$('document').ready(function() {
  $('form').bind('submit', function(event) {
        var submit = true;
        event.preventDefault();
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                // this is returning out of this block
                submit = false;
                return false;
            }
        });

        if (submit) {
            $.ajax({
                url: 'http://example.com/',
                dataType: 'json',
               type: 'GET',

            });
         }
  });
});

Answer 2

您正在从调用中创建的匿名函数返回each。相反，您应该执行以下操作：

$('document').ready(function() {
  $('form').bind('submit', function(event) {

        event.preventDefault();

        var has_empty = false;
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                has_empty = true;
            }
        });

        if(has_empty){
            return;
        }

        $.ajax({
            url: 'http://example.com/',
            dataType: 'json',
            type: 'GET',

         });
  });
});

Answer 3

您正在从您在调用中使用的回调函数返回，该回调函数each不会从事件处理程序中退出。

设置一个变量来标记状态：

$('document').ready(function() {
  $('form').bind('submit', function(event) {

    event.preventDefault();
    var ok = true;
    $('form input').each(function() {
        if( !$(this).val()) {
            $(this).addClass('warning');
            ok = false;
        }
    });

    if (ok) {
      $.ajax({
        url: 'http://example.com/',
        dataType: 'json',
        type: 'GET',

      });
    }
  });
});