JQuery验证表单，但不是“提交”按钮

Question

我正在使用JQuery.Validation插件验证表单中的某些字段，但我不想使用submit按钮，我只想使用<input type="button">并且一次点击使用我想要的JQuery调用我的控制器，唯一的问题是它不是一个submit按钮，所以即使字段错误或未经过验证，即使字段值错误也会调用控制器，因为我正在使用.click()事件单击该按钮时的JQuery ，我希望当我在字段上有错误的值并且验证显示错误消息，即使单击该按钮也不会调用我的动作控制器，我该如何达到此目的？ 这是我的html代码：

<script src="~/js/jquery.validate.js"></script>
<form action="post" class="rightform newsletter" id="formSubscription">
    <div class="title">
        <img src="http://ligresources.blob.core.windows.net/public/UK/Content/Images/newsletter.png" alt="">NEWSLETTER
    </div>
    <input type="text" id="txtFullName" name="fullName" placeholder="Full name" required>
    <input type="email" id="txtEmail" name="email" placeholder="Email address" required>
    <button type="button" id="btnSubscription" data-url="@Url.Action("SubscriptionEmail","Email")" style="background-color:#f66804;">SUBSCRIBE TO NEWSLETTER</button>                
</form>

这是JQuery.Validation plugin代码：

$(document).ready(function () {
    $("#formSubscription").validate({
        rules: {
            email: {
                required:true,
                email:true
            },
            fullName: {
                required:true
            }
        },
        messages: {
            email: {
                required: "Please enter an email address",
                email: "Please enter a valid email address"
            }
        }
    });
});

这是我clicked btnSubscription时暂时抛出的JQuery函数：

$(document).ready(function () {
    $("#btnSubscription").click(function () {
        SendSubscription();          
    }),
    return false;
}),

function SendSubscription() {       
    $.ajax({
        type: "post",
        url: $("#btnSubscription").data("url"),
        data: { fullName: $("#txtFullName").val(), emailAddress: $("#txtEmail").val() },
        success: function () {
            alert("email sent")
        },
        error: function () {
            alert("An error occurred..")
        }
    });
}

Answer 1

一旦您设置.validate()所有你需要做的是调用.valid()在你的方法.click()处理程序。 这是提交自动执行的操作，但您可以使用.valid()方法手动调用它。

Answer 2

你应该使用类型submit ，然后你可以使用submitHandler来管理你想要做的其他事情，如下所示：

$("#formSubscription").validate({
  submitHandler: function(form) {
    // do other things for a valid form
    form.submit();
  }
});

在文档中获取战利品： https ： //jqueryvalidation.org/validate/

Answer 3

在SendSubscription函数中添加一个if：

if (yourValidationDidntPass) {
  //do whatever you want
}
else {
  $.ajax({...});
}