在调用e.preventDefault（）后提交表单

Question

我正在做一些简单的表单验证，并陷入了一个非常基本的问题。我有5个字段对名称和主菜（用于晚餐注册）。用户可以输入1-5对，但如果存在名称，则必须选择主菜单。代码：

http://jsfiddle.net/eecTN/1/

<form> 
    Name: <input name="atendeename[]"> 
    Entree: <input name="entree[]"><br> 
    Name: <input name="atendeename[]"> 
    Entree: <input name="entree[]"><br> 
    Name: <input name="atendeename[]"> 
    Entree: <input name="entree[]"><br> 
    Name: <input name="atendeename[]"> 
    Entree: <input name="entree[]"><br> 
    Name: <input name="atendeename[]"> 
    Entree: <input name="entree[]"><br> 
    <input type="submit" value="Submit"> 
</form> 

// Prevent form submit if any entrees are missing 
$('form').submit(function(e){ 

    e.preventDefault(); 

    // Cycle through each Attendee Name 
    $('[name="atendeename[]"]', this).each(function(index, el){ 

     // If there is a value 
     if ($(el).val()) { 

      // Find adjacent entree input 
      var entree = $(el).next('input'); 

      // If entree is empty, don't submit form 
      if (! entree.val()) { 
       alert('Please select an entree'); 
       entree.focus(); 
       return false; 
      } 
     } 
    }); 

    $('form').unbind('submit').submit(); 

}); 

错误消息是工作，但它的每一次提交表单。我知道这条线有什么问题：

$('form').unbind('submit').submit(); 

......但我不确定我需要做什么。

Answer 1

最简单的解决方案是而不是请致电e.preventDefault()，除非验证实际上失败。在内部if语句内移动该行，并使用.unbind().submit()删除该函数的最后一行。

Answer 2

使用本地element.submit()规避的preventDefault在jQuery的处理程序，并注意您的return语句只是从每个环路返回，它不会从事件处理程序

$('form').submit(function(e){ 
    e.preventDefault(); 

    var valid = true; 

    $('[name="atendeename[]"]', this).each(function(index, el){ 

     if ($(el).val()) { 
      var entree = $(el).next('input'); 

      if (! entree.val()) { 
       entree.focus(); 
       valid = false; 
      } 
     } 
    }); 

    if (valid) this.submit(); 

}); 

Answer 3

$('form').submit(function(e){ 

    var submitAllow = true; 

    // Cycle through each Attendee Name 
    $('[name="atendeename[]"]', this).each(function(index, el){ 

     // If there is a value 
     if ($(el).val()) { 

      // Find adjacent entree input 
      var entree = $(el).next('input'); 

      // If entree is empty, don't submit form 
      if (! entree.val()) { 
       alert('Please select an entree'); 
       entree.focus(); 
       submitAllow = false; 
       return false; 
      } 
     } 
    }); 

    return submitAllow; 

}); 

Answer 4

问题返回是的，即使你看到错误，你return false影响.each()方法的回调......所以，即使有错误，你到达行

$('form').unbind('submit').submit(); 

并提交表单。

例如，您应该创建一个变量validated并将其设置为true。然后，在回调中，而不是return false，请设置validated = false。

最后...

if (validated) $('form').unbind('submit').submit(); 

这样一来，只有当没有将形式提交错误。

Answer 5

对不起拖延，但我会努力让完美的形式:)

我会加计数验证步骤，检查每一次不.val()。检查.length，因为我认为你的情况是更好的模式。当然删除unbind功能。

My jsFiddle

当然源代码：

// Prevent form submit if any entrees are missing 
$('form').submit(function(e){ 

    e.preventDefault(); 

    var formIsValid = true; 

    // Count validation steps 
    var validationLoop = 0; 

    // Cycle through each Attendee Name 
    $('[name="atendeename[]"]', this).each(function(index, el){ 

     // If there is a value 
     if ($(el).val().length > 0) { 
      validationLoop++; 

      // Find adjacent entree input 
      var entree = $(el).next('input'); 

      var entreeValue = entree.val(); 

      // If entree is empty, don't submit form 
      if (entreeValue.length === 0) { 
       alert('Please select an entree'); 
       entree.focus(); 
       formIsValid = false; 
       return false; 
      } 

     } 

    }); 

    if (formIsValid && validationLoop > 0) { 
     alert("Correct Form"); 
     return true; 
    } else { 
     return false; 
    } 

});