ajax表单提交按钮忽略验证

Question

所以我有一个非常基本的帐户注册表格。 提交表单工作正常，输入字段的验证也可以。 不起作用的是，当输入不正确时阻止提交。

<form id="register">
    <input id="username" name="username" minlength="3">
    <input id="activate" type="button" value="activate">
</form>

<script>
$().ready(function(){
    $("#register").validate({
        rules: { username: "required" },
        messages: { username: "Please enter a Username }
    });
});

$("#activate").click(function(){
    var username = $("#username").val();

    $.ajax({
        type: "POST",
        url: "validateuser.php",
        data: { username: username }
    }).done(function(data){
    console.log(data);
    });
});
</script>

因此，这是我的代码的简化示例。 我知道它无法像现在那样工作，因为.click函数与validate() 。 但是我只是不知道如何“组合”这两个功能。 validate.js确实将inputs的classes更改为valid/invalid ，所以我可以为此签入$.ajax函数。 但是必须有一个更优雅的解决方案。

当我使用库时，我总是很困惑，因为我不知道它们如何与“常规” jQuery交互。 还值得一提的是，我对jQuery还是相当陌生，并且刚开始了解它。

我对此表示感谢。

Answer 1

使用提交处理程序。 因为您要单击“ activate按钮来启动ajax，这是与验证功能不同的功能。 因此将其称为绕过/忽略验证错误。 因此， submitHandler在jquery验证功能内使用submitHandler 。

<script>
$().ready(function(){
    $("#register").validate({
        rules: { username: "required" },
        messages: { username: "Please enter a Username },
        submitHandler:function(){    // Use submitHandler
            var username = $("#username").val();

            $.ajax({
            type: "POST",
            url: "validateuser.php",
            data: { username: username }
                    }).done(function(data){
                    console.log(data);
                });
            }
    });
});

</script>