JQuery Ajax 验证后如何提交表单？

Question

我无法让 .submit() jquery 函数工作 我已经将代码中的所有内容归结为：

  <form action="/server/addserver.php" method="post" accept-charset="utf-8" id="mainform"><input type="text" name="test" value=""  /><input type="submit" name="submit" value="Submit" id="submitbutton" /></form>

<script type="text/javascript">
    $("#submitbutton").click(
    function(){
         $("#mainform").submit();
             return false;
    });
</script>

在我看来，这应该 1 - 停止按钮的默认行为，然后 2 - 手动提交表单。

如果我换出 .submit();与 .hide();有效。这不是在第一次运行一些 ajax 验证后手动提交表单的首选方法吗？

谢谢

Answer 1

您可以这样做：

$(function () {
    $('#mainform').submit(function () {
        if (isFormValid()) { // do your validation
            return true;
        }
        return false;
    });
});

这将在提交表单时运行（只需使用普通的 按钮）。此处返回 false 将阻止页面发布。

如果您想将事件绑定到按钮，请尝试如下：

$(function () {
    $('#submitbutton').click(function () {
        if (isFormValid()) { // do your validation
            $('#mainform').submit();
        }
        return false;
    });
});

Answer 2

首先，我认为您应该注意以下几点：

1. 任何时候您想像这样立即将事件绑定到 DOM 元素，您应该确保页面已完全加载。如果有疑问，请将代码包装在

   $(document).ready(function() { /* 页面加载后执行的代码 */ });

   。

2. 此外，如果 input[type="submit"] 元素的 name 属性设置为，则 .trigger("submit") 方法不起作用值“提交”。由于不带参数调用 .submit() 是 .trigger('submit') 的快捷方式，因此无论何时调用 JQuery 的 .submit() > 元素上的方法，您需要确保并分配输入的 name 属性，而不是“submit”。

现在，回答您的问题；首先关于返回 false 是否是手动提交表单的首选方式，答案通常是否定的。原因是返回 false 会执行三件事，而您通常不想执行所有这些操作。它可以防止事件的默认浏览器行为，还可以阻止事件冒泡，并且立即返回并退出该函数。通常，您可能只想event.preventDefault()或event.stopPropagation()…甚至完全取消绑定事件。但在这种情况下，在我看来，返回 false 而不是调用适当的晚上方法似乎会混淆代码的意图。

如果您还需要阻止浏览器对 submit 事件执行默认操作，则可以使用 JQuery 的备用触发方法：

$('#mainform').triggerHandler('submit');

.
Though, the validator method itself should probably be where you call form.submit() in the case that there are no errors. It should also be where you handle form submission, since it is the gatekeeper, so to speak.

总而言之，如果您要使用验证器插件，您应该遵循它自己的约定。通过将 name="submit" 添加到提交按钮，确保表单执行默认提交，然后删除您拥有的所有 JQuery 代码，并将其替换为验证器文档中的此示例：

$("#mainform").validate({
 submitHandler: function(form) {
   form.submit(); // Don't use a JQuery selector here, just "form"
 }
});

这应该允许插件按预期运行。当然，最后一步是添加验证规则。我希望这有帮助。如果您在事件处理方面仍然遇到问题，请尝试使用 JQuery 的事件对象方法在控制台上进行调试。