$(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.
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>
My Javascript code is like this:
...
$('#mailer').validate({
focusInvalid: false,
debug: true,
rules: {
name: {
required: true
},
email_address: {
required: true,
email: true
},
request: {
required: true
},
gender: {
required: true
}
},
...
Demo and complete code is like this: http://jsfiddle.net/oscar11/2yXsL/549/
When gender is not selected and the submit button is clicked, there is a "field required" message. But the message is irregular. The message should appear at the leftmost section, such as "field required" messages for the text fields.
Any solution to solve my problem?
You can use the errorPlacement option. Try adding this to your options:
errorPlacement :function(error,element){
switch(element.attr('name')) {
case 'gender':
error.insertAfter(element.parent());
break;
default:
error.insertAfter(element);
}
}
Here's an amended fiddle: http://jsfiddle.net/2yXsL/551/
Add the following CSS:
label.error {
float: right;
}
You can see that it works using your modified demo: http://jsfiddle.net/2yXsL/550/
I'm at coding a multi step form and have a question:
Is it possible in JavaScript or jQuery to activate this validation script:
<script type="text/javascript">
$(function (){
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
</script>
Only when this button is clicked :
<button type="button1" class="button next action-button" id="button4">Next</button>
It would be nice if the id="button 4" determine this function.
You can try this
$('#button4').click(function() {
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name', },
industry: { required: 'Please check one of the options', },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
.validate() - to initialize the plugin (with options) once on DOM ready.
.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.
The answer is :
$('#button4').click(function()
{
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
If button code
<button type="button1" class="button next action-button" id="button4">Next</button>
Special thanks go to Satpal who answered my question .
using following function for validating but cant be work fine in first time but work fine in second time.
second function is used for validator and its not working fine when i first click the button but its work fine second time please help.
function saveValue(){
if (validateFormset().form()) { // validation perform
$('form#vendorActionForm').attr({methos: 'POST'});
$('form#vendorActionForm').attr({action: 'vendorAddressCreateUpdate.htm'});
$('form#vendorActionForm').submit();
}else{
$(".textMessgeClass").text("Please fill the highlighted field/s");
$(".textMessgeClass").addClass('errorClass');
$(".textMessgeClass").fadeIn("slow");
$(".textMessgeClass").delay(2000).fadeOut(2000);
}
}
function validateFormset(){
var validator = $("#vendorActionForm").validate({
rules: {
accountType: {
required:true
},
addressRank: {
required:true
},
street: {
required:true
},
city: {
required:true
},
state: {
required: true,
accept: "[a-zA-Z]+",
minlength: 2
},
region: {
required: true
},
zipCode: {
required: true,
rangelength: [3, 5]
},
contactName: {
required: true
},
mobile: {
required: false,
number: true,
minlength: 10
},
email: {
required: true,
email: true
},
email2: {
required: false,
email: true
},
email3: {
required: false,
email: true
}
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').addClass("addressErrorClass");
},
success: function(error) {
$("#vendorActionForm").find('.valid').removeClass("addressErrorClass");
}
});
alert('AAAA');
alert(validator);
return validator;
}
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();
}
});
});