I am using JQuery validation plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
Jquery code:
function validateForm(){
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
}
But above script gives error as below.
TypeError: $.data(...) is undefined
am i doing anything wrong here? It works fine if i remove all for each and go with default messages.
Thanks!
you are not using $(document).ready();
try this
$(document).ready(function(){
// do script here
});
hope it will help
The only problem seems to be, you are adding the rules to the elements before the validator plugin is initialized for the form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
then
jQuery(function ($) {
function validateForm(){
var validator = $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return validator;
}
});
Demo: Fiddle
Related
How can I change the default require message in Jquery validation plugin. I have tried the following, but it still prints the default message:
$("#form1").validate({
ignore: [],
debug: false,
rules: {
firstName: {
required: true,
minlength: 2,
maxlength: 200
}
message: {
firstName:{
required: "Custom error message."
}
}
}
});
});
UPDATE
I change my message into messages
messages: {
firstName:"Custom error message."
}
$("#form1").validate({
ignore: [],
debug: false,
rules: {
firstName: {
required: true,
minlength: 2,
maxlength: 200
},
messages: {
firstName:{
required: "Firstname required",
minlength: "Min length is 2",
maxlength: "Max length is 200",
}
}
}
});
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 .
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();
}
});
});
My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?
Here is fiddle link http://jsfiddle.net/2L6xT/
BAsically here is my jquery validation code
$(document).ready(function () {
<!-- validation -->
$('#submitDetails').validate({
// 1. validation rules.
rules: {
firstName: {
required: true,
maxlength: 120
},
lastName:{
required: true,
maxlength: 120
},
custom1: {
required: true,
maxlength: 120
},
state: {
required: true
},
custom9: {
required: true
},
email: {
required: true,
email: true
}
},
// 2. Validation fail messages
messages: {
custom9: {
required: "You must agree to the terms of conditions in order to participate."
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "custom9" )
error.appendTo("#error_msg");
else
error.insertAfter(element);
}
});
///execute when submit button is clicked
$("#submit").click(function () {
});
});
In your html, the input element doesnot have name, the validator framework uses name to apply the rules
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />
so along with id add name also(id is not required if it is not used elsewhere)
Demo: Fiddle
I have below jquery code to validate the form.
function validateForm(){
$("input.field1").each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Required"
}
} );
});
$("input.fieldTwo").each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
$("input.field3").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12
messages: {
maxlength: "Maximum 12 characters"
}
} );
});
$("input.field4").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12
messages: {
maxlength: "Maximum 12 characters"
}
} );
});
$("input.field5").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12
messages: {
maxlength: "Maximum 12 characters"
}
} );
});
return $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
}
But it always gives script error saying SyntaxError: missing } after property list.
But i believe no where } is required.
Am i missing anything here?
Thanks!
You're missing a comma here:
$("input.field3").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12, // added a comma here
messages: {
maxlength: "Maximum 12 characters"
}
} );
});
You've actually missed a comma in every single area after the maxlength property. Probably a copy and paste error?
You are missing several commas. See code, and replicate throughout.
$("input.fieldTwo").each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true //MISSING COMMA
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
$("input.field3").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12 //MISSING COMMA
messages: {
maxlength: "Maximum 12 characters"
}
} );
});
$("input.field4").each(function(){
$(this).rules("add", {
required: false,
maxlength: 12 //MISSING COMMA
messages: {
maxlength: "Maximum 12 characters"
}
} );
});