如何在 jQuery 验证中自定义 submitHandler()？

Question

我想使用 jQuery validate 验证表单，然后在 submitHandler() 内部我想做一些事情。但即使在使用event.preventDefault() 之后，它也总是会刷新页面。这是我的代码

$('form').validate({
            rules: {
                brand: {
                    required: true
                },
                model: {
                    required: true
                },
                description: {
                    required: true,
                    minlength: 15
                },
                name: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                
            },
            submitHandler: {
                function (form) {
                    form.submit( e => {
                        e.preventDefault();
                        console.log("Hello...");
                    })
                }
            }
        })

怎么做？

Answer 1

我原本以为你有一个语法错误会破坏插件......

submitHandler: {
    function (form) {
        ....
    }
}

因为它通常看起来像这样......

submitHandler: function(form) {
    ....
}

但是，这个想法是错误的......两种格式的工作方式相同。

---

其次，您永远不会在 submitHandler 回调中放置 event.preventDefault()...

• 这里甚至无法识别它，因为没有默认的 event 可以阻止。
• 插件已经自动阻止表单的默认提交事件。

最后，当使用submitHandler运行自定义代码时，不要忘记在函数的最后一行包含提交表单的默认代码...

submitHandler: function(form) {
    // your code here
    console.log("Hello...");
    form.submit(); // default form submit
}

无论如何，除非您通过演示解决问题，否则这里一切正常...

演示：jsfiddle.net/e8xkwfzc

Answer 2

如果在点击提交按钮后总是刷新页面，最好的方法是禁用表单上的提交事件。

<form method="post" action="/etc.php" onsubmit="return false;"> <input type="text" value="apple"> <input type="submit" value="Submit"> </form>