使用 jQuery 和验证提交表单

Posted 2023-05-09

【中文标题】使用 jQuery 和验证提交表单

【英文标题】：Submitting form with jQuery & validation

【发布时间】：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。

【参考方案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;

【讨论】：

即使验证失败也会提交。