Question

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

if

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',

      });
    }
  });
});

用jQuery循环输入元素每个（）

3 个答案: