JQuery validation form but not `submit` button

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

If you dont want to use submit button then you can call the functionality using onfocusout event. — Nevermore
– Nevermore, Commented Dec 13, 2016 at 14:39
just call the .valid() function on the form in your click handler — Chase
– Chase, Commented Dec 13, 2016 at 14:41
Here is how i would have built a more generic example: jsfiddle.net/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
– Endless, Commented Dec 13, 2016 at 15:09

Chase · Accepted Answer · 2016-12-13 15:00:19Z

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.

answered Dec 13, 2016 at 15:00

Chase

2,3241 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jordi Flores · Accepted Answer · 2016-12-13 14:38:59Z

3

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/

answered Dec 13, 2016 at 14:38

Jordi Flores

2,15012 silver badges17 bronze badges

Comments

Mayday · Accepted Answer · 2016-12-13 14:39:06Z

0

put an if in the SendSubscription function:

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

answered Dec 13, 2016 at 14:39

Mayday

5,2165 gold badges27 silver badges65 bronze badges

Collectives™ on Stack Overflow

JQuery validation form but not `submit` button

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related