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",
}
}
}
});
Related
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 .
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
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"
}
} );
});
I changed my validation function a bit, because i wanted to include messages, and it throws missing : after property id now on line 2 in this code
$("#order").validate({
$("#vardas").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#pavarde").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#adresas").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#telef").rules("add", {
required: true,
digits: true,
messages: {
required: "Reikalingas laukas",
digits: "Turi susidaryti iš skaičių"
}
});
$("#email").rules("add", {
required: true,
email: true,
messages: {
required: "Reikalingas laukas",
email: "Patikrinkite ar teisingai įvestas el. pašto adresas"
}
});
submitHandler: function(form) {
$(form).ajaxSubmit();
$("#aciu").show(1000);
$("#duomenysdiv").hide(500);
}
});
any idea what's going on?
You can only call .rules() after .validate() has run, and not within the object declaration (the reason for your current error). Adding rules based on ID should look like this:
$("#order").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
$("#aciu").show(1000);
$("#duomenysdiv").hide(500);
}
});
$("#vardas").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#pavarde").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#adresas").rules("add", {
required: true,
messages: {
required: "Reikalingas laukas"
}
});
$("#telef").rules("add", {
required: true,
digits: true,
messages: {
required: "Reikalingas laukas",
digits: "Turi susidaryti iš skaičių"
}
});
$("#email").rules("add", {
required: true,
email: true,
messages: {
required: "Reikalingas laukas",
email: "Patikrinkite ar teisingai įvestas el. pašto adresas"
}
});
below is my code the validation only works without the remote validation. once i include remote validation, it submit the form without completing all the other form validations?
$(document).ready(function() {
$("#form1").validate({
rules: {
firstName: "required",// simple rule, converted to {required:true}
lastName: "required",
email: {// compound rule
required: true,
email: true,
success: "valid",
remote: "checkAddress.php"
},
password: {
required: true,
success: "valid",
minlength: 5
},
verify: {
required: true,
success: "valid",
minlength: 5,
equalTo: "#password"
},
address1: "required",
city: "required",
province: "required",
dob: {
required: true,
date: true,
success: "valid"
},
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
},
messages: {
email:{
remote: "This email is already registered! One registration per email address."
},
captcha_code:{
remote: "Enter the right captcha value!."
}
},
onsubmit: true
});
});
What I was asking was if you have implemented captcha_code as a method? in captcha_code: true,.
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
Like this
jQuery.validator.addMethod("captcha_code", function(value, element) {
return (this.optional(element) || /* do something */ );
}, "");
I found this captcha demo and it has no captcha_code as method, only required and remote. So I was thinking if you have implemented it.
Here is the script from the demo. http://jquery.bassistance.de/validate/demo/captcha/
$(function(){
$("#refreshimg").click(function(){
$.post('newsession.php');
$("#captchaimage").load('image_req.php');
return false;
});
$("#captchaform").validate({
rules: {
captcha: {
required: true,
remote: "process.php"
}
},
messages: {
captcha: "Correct captcha is required. Click the captcha to generate a new one"
},
submitHandler: function() {
alert("Correct captcha!");
},
success: function(label) {
label.addClass("valid").text("Valid captcha!")
},
onkeyup: false
});
});
The remote URL is hit passing in the value of the field to which it’s expecting a JSON TRUE/FALSE in return, are you in this one?
so i changed:
email: {// compound rule
required: true,
email: true,
success: "valid",
remote: "checkAddress.php"
},
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
to
email: {// compound rule
required: true,
remote: "checkAddress.php"
},
captcha_code: {
required: true,
remote: "checkCaptcha.php"
}
it works great, wow, you guys rock!!!