Question

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

<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()绕过jQuery处理程序中的preventDefault，并注意你的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

问题在于，即使您看到错误，您的return false也会影响.each()方法的回调...因此，即使出现错误，您也会遇到错误

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

并提交表格。

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

...最后

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

这样，只有没有错误才会提交表格。

Answer 4

$('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 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;
    }

});

Answer 6

实际上，这似乎是正确的方法：

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

    //prevent default
    e.preventDefault();

    //do something here

    //continue submitting
    e.currentTarget.submit();

});

Answer 7

遇到了同样的问题，在论坛上等都没有找到直接的解决方案。最后，以下解决方案对我来说很完美：只需在事件处理程序函数中为“提交”事件形式实现以下逻辑即可：

if (txtJuice != "0")
{
    rtfSmetka.AppendText("Juice \t\t\t\t" + txtJuice.Text + Environment.NewLine);
}

那样简单；注意：当表单'submit'事件的处理程序返回'false'时，表单不会提交到html标记的action属性中指定的URI；直到且除非处理程序返回“ true”；并且所有输入字段都经过验证后，事件处理程序将返回“ true”，并且您的表单将被提交；

还要注意：if（）条件内的函数调用基本上是您自己的实现，以确保所有字段都经过验证，因此必须从那里返回“ true”，否则返回“ false”

Answer 8

$(document).ready(function(){
      $('#myform').on('submit',function(event){
            // block form submit event
            event.preventDefault();

            // Do some stuff here
            ...

            // Continue the form submit
            event.currentTarget.submit();
      });
});

Source

Answer 9

为什么不绑定提交按钮事件而不是表单本身？如果你绑定按钮而不是表单本身会更容易和更安全，因为表单将主要提交，除非你将使用preventDefault()

$("#btn-submit").on("click", function (e) {
    var submitAllow = true;
    $('[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;
            }
        }
    });
    if (submitAllow) {
        $("#form-attendee").submit();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-attendee">
    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>
    <button type="button" id="btn-submit">Submit<button>
</form>

Answer 10

就我而言，有一场竞赛，因为我需要 ajax 响应来填充隐藏字段并在填充后发送表单。我通过将 e.preventDefault() 放入条件来修复它。

var all_is_done=false;
$("form").submit(function(e){
  if(all_is_done==false){
   e.preventDefault();
   do_the_stuff();
  }
});
function do_the_stuf(){
  //do stuff
  all_is_done=true;
  $("form").submit();
}

Answer 11

绑定到按钮不会解决按下按钮之外的提交，例如按回车

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

11 个答案: