I have some fields that I'm requiring depending on which button is clicked. The behavior I'm seeing though is not what I would expect nor desire. When I click one of the buttons, it sets the required fields as I'd like, but then if I click another button, it doesn't reset them for some reason.
Code is below. Thanks for any help you can provide:
function makeAllRequired() {
$("#SomeForm").validate({
rules: {
StartDate: {
required: true,
date: true
},
Name: {
required: true
}
},
errorElement: "div"
});
}
function makeSomeRequired() {
$("#SomeForm").validate({
rules: {
StartDate: {
required: true,
date: true
}
},
errorElement: "div"
});
}
$(document).ready(function () {
$("#SomeButtonOne").click(function () {
makeAllRequired();
$("#SomeForm").attr("action", "/here/there");
$("#SomeForm").submit();
});
$("#SomeButtonTwo").click(function () {
makeSomeRequired();
$("#SomeForm").attr("action", "/here/elsewhere");
$("#SomeForm").submit();
});
});
Try reseting the form before setting new required items: http://docs.jquery.com/Plugins/Validation/Validator/resetForm
I'm not 100% sure but try removing the rules first before you apply new ones
function makeAllRequired() {
$("#SomeForm").rules("remove");
$("#SomeForm").validate({
rules: {
StartDate: {
required: true,
date: true
},
Name: {
required: true
}
},
errorElement: "div"
});
}
function makeSomeRequired() {
$("#SomeForm").rules("remove");
$("#SomeForm").validate({
rules: {
StartDate: {
required: true,
date: true
}
},
errorElement: "div"
});
}
Related
I am using client side validation plugin in my application. When I am validating a new from its working but when I am validating edit form its not working.
If anyone had done something similar, please suggest me how to proceed.
<script type="text/javascript">
$("#group_name").validate({
rules: {
"group[name]": {
required: true
},
"group[contact]": {
required: true
},
"group[contact_phone]": {
required: true
},
},
messages: {
"group[name]": {
required: "Required"
},
"group[contact]": {
required: "Required"
},
"group[contact_phone]": {
required: "Required"
},
},
onfocusout: function(element) {
this.element(element);
},
});
</script>
I validate my form in bootstrap tabs using jquery validation plugin like this :
JS:
$(document).ready(function () {
$("form[name=modify]").validate({
highlight: function (label) {
$(label).closest('.form-group').addClass('has-error');
var fieldset = $(label).parent().parent().parent().parent().parent().parent().parent();
if ($(fieldset).find("fieldset.tab-pane.active:has(div.has-error)").length == 0) {
$(fieldset).find("fieldset.tab-pane:has(div.has-error)").each(function (index, tab) {
var id = $(tab).attr("id");
$('a[href="#' + id + '"]').tab('show');
});
}
},
debug: true,
ignore: [],
rules: {
first_name: {
required: true,
},
surname: {
required: true
},
id_number: {
required: true
},
mobile_number: {
number: true,
minlength: 10,
},
home_number: {
number: true,
minlength: 10,
},
other_contact: {
number: true,
minlength: 10,
},
line1: {
required: true,
},
city_town: {
required: true,
},
postal_code: {
required: true,
minlength: 4,
},
curr_renumeration: {
required: true,
number: true,
},
expect_renumeration: {
required: true,
number: true
},
email: {
email: true,
required: true,
},
}
});
$("[type=submit]").submit(function (e) {
e.preventDefault();
});
});
in action jquery validation plugin worked and validate all tabs and show error bottom of each input. i need to show alert Or highlight title of tabs (ie : <a data-toggle="tab" href="#form3">Address Details</a>) if in tabs was a error.
how do can i show this alert or highlight error in title tabs
DEMO FIDDLE
The following code works in all browsers except IE. I need to fix it.
$(function () {
// Setup form validation on the #register-form element
$("form[name=firstform]").validate({
// Specify the validation rules
rules: {
username: {
required: true,
alpha: true
},
},
messages: {
username: {
required: "Please Provide Your Name",
alpha: "Name Should contains only alphabets",
},
},
submitHandler: function (form) {
form.submit();
}
});
});
Could somebody who has worked with IE for this type of jquery validation kindly help me to fix this problem?
Try to remove the trailing commas in your code:
$(function () {
// Setup form validation on the #register-form element
$("form[name=firstform]").validate({
// Specify the validation rules
rules: {
username: {
required: true,
alpha: true
} // Here
},
messages: {
username: {
required: "Please Provide Your Name",
alpha: "Name Should contains only alphabets" // Here
} // Here
},
submitHandler: function (form) {
form.submit();
}
});
});
But it isn't firing when I hit submit. It submits but doesn't do anything. Any ideas? The alert doesn't even get called :(
The page I'm doing this on, is my Checkout page on:
http://rsatestamls.kaliocommerce.com
(Need a product in your cart to proceed to checkout)
My Javascript code is:
<script>
$(document).ready(function () {
$("#Method input:checkbox").change(function () {
if (this.checked) {
var checkname = $(this).attr("name");
$('input[type=checkbox][id=OnAccount]').prop('value', 'True')
$("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
} else {
$('input[type=checkbox][id=OnAccount]').val('No');
}
});
$("#CheckoutOptions input:checkbox").change(function () {
if (this.checked) {
var checkname = $(this).attr("name");
$("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
}
});
});
$("#CheckOut").submit(function (event) {
alert("Handler for .submit() called.");
jQuery.validator.setDefaults({
debug: false,
success: "valid"
});
$("#CheckOut").validate({
rules: {
FirstName: {
required: true
},
LastName: {
required: true
},
Email: {
required: true,
email: true
},
Phone: {
required: true,
digits: true
},
Address1: {
required: true
},
City: {
required: true
},
PostalCode: {
required: true,
digits: true
},
Country: {
required: true
},
State: {
required: true
},
pwd: {
required: true
},
pwd_confirm: {
required: true
},
FName_SHIP: {
required: true
},
LName_Ship: {
required: true
},
Phone_Ship: {
required: true,
digits: true
},
Address1_Ship: {
required: true
},
City_Ship: {
required: true
},
PostalCode_SHIP: {
required: true,
digits: true
},
COUNTRY_SHIP: {
required: true
},
State_SHIP: {
required: true
},
NameOnCard: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
CreditCardType: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
CardNumber: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
CardExpMonth: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
CardExpYear: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
CVC: {
required: {
depends: function (element) {
return $("#CCMethod").is(":checked");
}
}
},
customernumber: {
required: {
depends: function (element) {
return $("#OnAccount").is(":checked");
}
}
}
}
});
});
populateCartTotal();
</script>
Your submit handler isn't in your $(document).ready block, but should be. The handler is never getting attached.
In fact, you shouldn't use a submit handler at all, here. Just put your validate call in the ready block. See the demo here: http://jquery.bassistance.de/validate/demo/
<script>
$(document).ready(function () {
$("#Method input:checkbox").change(function () {
if (this.checked) {
var checkname = $(this).attr("name");
$('input[type=checkbox][id=OnAccount]').prop('value', 'True')
$("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
} else {
$('input[type=checkbox][id=OnAccount]').val('No');
}
});
$("#CheckoutOptions input:checkbox").change(function () {
if (this.checked) {
var checkname = $(this).attr("name");
$("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked");
}
});
// move this stuff to here
jQuery.validator.setDefaults({
debug: false,
success: "valid"
});
$("#CheckOut").validate({
rules: {
// all those rules here
}
});
});
populateCartTotal();
As an addendum to Ed's answer, I would also recommend setting up your validation scheme outside of the submit() handler.
$(document).ready(function () {
$("#frm").validate({
errorClass:"invalid",
rules: {
cname: { required: true,minlength:5 },
cemail: { required: true, email: true }
}
});
});
I am using above function to validate my html form. Validation is working fine. But I want to remove the default error message. I dont want to give any error message, just need to change the background color of the control for which validation fails.
You can just give them an empty error message string, like this:
$("#frm").validate({
errorClass:"invalid",
rules: {
cname: { required: true },
cemail: { required: true, email: true }
},
messages: {
cname: "",
cemail: ""
}
});
You can test it out here.