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..")
}
});
}
Share
Improve this question
edited Dec 13, 2016 at 14:40
AlexGH
asked Dec 13, 2016 at 14:34
AlexGHAlexGH
2,8176 gold badges48 silver badges84 bronze badges
8
- 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
Reset to default 3Once 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({...});
}