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

Question

I'm using the JQuery.Validation plugin to validate some fields in a form, but I don't want to use a submit button, I want to use just an <input type="button"> and once clicked using JQuery I want to call my controller, the only thing is that it's not a submit button, so even if the fields are wrong or not validated it will call the controller even if the fields values are wrong, because I'm using the .click() event of JQuery when that button is clicked, I want when I have wrong values on the fields and the validation is showing an error message not to call my action controller even if the button is clicked, how can I reach this? This is my html code:

<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>

This is the JQuery.Validation plugin code:

$(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"
            }
        }
    });
});

And this is the JQuery function that I have for the moment to throw when the btnSubscription is clicked :

$(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

Once you set up your .validate() all you need to do is call the .valid() method in your .click() handler. This is what submit does automatically, but you can call it manually with the .valid() method.

Answer 2

you should use type submit , and then you can use the submitHandler in order to manage other things you want to do, like this:

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

Take a loot at the documentation: https://jqueryvalidation.org/validate/

Answer 3

put an if in the SendSubscription function:

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