【问题标题】:Submitting form with jQuery & validation使用 jQuery 和验证提交表单
【发布时间】:2012-07-24 01:06:19
【问题描述】:

我正在使用 validate.js 来验证表单。如果表单未通过验证,当用户尝试提交表单时会显示一条消息,显示错误。如果用户通过验证,则会弹出一条成功消息。问题是,表单实际上并没有发送/采取行动,因为 validate.js 阻止了默认行为。

阻止表单发送的代码是:

if (event && event.preventDefault) {
    event.preventDefault();
} else if (event) {
    event.returnValue = false;
}

你可以在这里看到完整的js:http://jsfiddle.net/DBfks/

在我看来,如果表单没有通过验证,上面的代码会阻止表单提交的默认行为,但如果通过了,那么表单应该提交。它是否正确?关于如何使表单提交而不是显示成功消息的任何想法(请参阅 jsfiddle 以了解成功和错误消息是如何工作的)

提前致谢。你可以看到一个工作演示here

【问题讨论】:

    标签: jquery forms validation submit


    【解决方案1】:

    添加

     $("#myForm").submit();
    

    您要提交表单的位置。

    在你的 jsFiddle 中你得到了这个 if/else:

    if (errors.length > 0) {
                            SELECTOR_ERRORS.empty();
    
                            for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
                                SELECTOR_ERRORS.append(errors[i].message + '<br />');
                            }
    
                            SELECTOR_SUCCESS.css({ display: 'none' });
                            SELECTOR_ERRORS.fadeIn(200);
    
                        } else {
                            SELECTOR_ERRORS.css({ display: 'none' });
                            SELECTOR_SUCCESS.fadeIn(200);
    
                        }
    

    (好吧,复制粘贴有点搞砸了!)

    因此,如果有任何错误,请将所有错误添加到错误框中并显示出来。否则显示您验证了它。但这不是你想要的,你应该在那里提交表单:

    else {
        $("#yourform").submit();
    }
    

    【讨论】:

    • 我希望将其集成到验证代码中。我在外面尝试过(使用提交按钮上的点击事件),但它不起作用(似乎被验证插件阻止)
    • 是的,你应该用这个替换成功消息的代码。
    • 我在遇到问题时需要帮助。这在默认情况下不起作用,因为默认情况是被阻止的。
    • 感谢您的帮助,但这并不符合您的预期。您在下面 -1 的分析器是一个真正可行的解决方案。我发布的代码阻止了表单提交。
    • 是的,确实,该代码阻止了表单提交,但它总是被触发。如果您删除它,它甚至会在验证失败时提交。 @JCHASE11
    【解决方案2】:

    代码不能使用 jQuery submit 的原因是 preventDefault 方法阻止了 jQuery 提交表单。解决方法是简单地删除这些行:

    if (event && event.preventDefault) {
        event.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
    

    【讨论】:

    • 即使验证失败也会提交。
    猜你喜欢
    • 2021-09-08
    • 2018-06-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多