调用e.preventDefault（）后提交表单 [英] Submit form after calling e.preventDefault()

问题描述

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

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

 < form> 
名称：< input name =atendeename []> 
主菜单：< input name =entree []>< br> 
名称：< input name =atendeename []> 
主菜单：< input name =entree []>< br> 
名称：< input name =atendeename []> 
主菜单：< input name =entree []>< br> 
名称：< input name =atendeename []> 
主菜单：< input name =entree []>< br> 
名称：< input name =atendeename []> 
主菜单：< input name =entree []>< br> 
< input type =submitvalue =提交> 
< / form> 
  

  //防止表单提交（功能（e）{
 
 e.preventDefault（）; 
 
 //循环每个参加者名称
 $（'[name =atendeename []]'，this）.each（function（index，el）{
 
 //如果有值
 if（$（el）.val（））{
 
 //找到相邻的主菜单输入
 var entree = $（el）.next（'input'）; 
 
 //如果主菜单为空，请不要提交表单
 if（！entree.val（））{
 alert（'请选择主菜单'）; 
主菜单.focus（）; 
 return false; 
} 
} 
}）; 
 
 $（'form'）。unbind（'submit'） .submit（）; 
 
}）; 
  

错误信息正在工作，但它每次都提交表单。

$ b

  $（'form'）。unbind（'submit'）。submit（） ; 
  

...但我不知道我需要做什么。 ）除非验证确实失败。如果语句在内部内移动该行，并使用 .unbind（）。submit（）。

I'm doing some simple form validation here and got stuck on a very basic issue. I have 5 field pairs for name and entree (for a dinner registration). The user can enter 1-5 pairs, but an entree must be selected if a name is present. Code:

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();

});

The error message is working, but it's submitting the form every time. I know there's something wrong with this line:

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

...but I'm not sure what I need to do.

解决方案

The simplest solution is just to not call e.preventDefault() unless validation actually fails. Move that line inside the inner if statement, and remove the last line of the function with the .unbind().submit().

这篇关于调用e.preventDefault（）后提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！