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=".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..")
        }
    });
}

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/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..")
        }
    });
}

• javascript
• jquery
• html
• twitter-bootstrap
• validation

• If you dont want to use submit button then you can call the functionality using onfocusout event. – Nevermore Commented Dec 13, 2016 at 14:39
• 1 change one of your input to type="email" – Endless Commented Dec 13, 2016 at 14:39
• 1 just call the .valid() function on the form in your click handler – Chase Commented Dec 13, 2016 at 14:41
• 1 stackoverflow./questions/12098103/… – Chase Commented Dec 13, 2016 at 14:41
• 1 Here is how i would have built a more generic example: jsfiddle/xy3k6qjj one that isn't so specific to your code... Also, it don't require any validation plugin since the submit event will not happen until it's valid – Endless Commented Dec 13, 2016 at 15:09

3 Answers 3

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.

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

put an if in the SendSubscription function:

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