Custom error messages for Groups within the jQuery Validation plugin - javascript

I'm using the jQuery Validation plugin and i've started to group some of my fields together:
groups: {
fullName: "myFirstName myLastName"
},
I've also added the fields to the rules section so that they are validated:
rules: {
myFirstName: {
required: true
},
myLastName: {
required: true
}
},
This works great and produces an error of "This field is required" for the group.
My question lies with custom error messages. I have the following setup:
messages: {
fullName: "Please enter both your first name and your last name"
}
Unfortunately the custom error doesn't show, only the generic one.
Does anyone have any ideas?

You have to use errorPlacement for this, and the message should be the same on both, for example:
messages: {
myFirstName: { required: "Please enter both your first name and your last name" },
myLastName: { required: "Please enter both your first name and your last name" }
}
Then, assuming they have the same IDs here, your errorPlacement option would look like this:
errorPlacement: {
var n = element.attr("name");
if (n == "myFirstName" || n == "myLastName")
error.insertAfter("#myLastName");
else
error.insertAfter(element);
}
The group itself has no message, it's just telling the plugin that they share a message label.

Related

validate.js different functions on invalid

I'm using validation.js plugin and in the case I want it I was trying to make some changes to it but after a lot of thinking and testing and searching I got nothing , at least nothing I wanted...
I have this code:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number',
minlength: 'Minimum length: 6'
}
}
});
every thing is okay but I want it to run some different functions in addition to showing massages , for example when the user type sth less than 6 char , show massage AND RUN Function ONE , if the user type sth except nums it shows massage and also RUN Function TWO
sth like this:
$("#form").validate({
rules:
{
phone:
{
required: true,
number: true,
minlength: 6
}
},
messages:
{
phone:
{
required: 'This field is required',
number: 'Invalid phone number' + function TWO,
minlength: 'Minimum length: 6' + function ONE
}
}
});
can anyone help me please?
You can use a callback function instead of a string as the value for a custom message. Just make sure to return the message from that function. That way you can do any operation before outputting the message. The callback function takes two arguments, first is the value being passed to the rule, and second is the element.
messages
...Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule's parameters as the first argument and the element as the second, and must return a String to display as the message.
messages:
{
phone:
{
required: 'This field is required',
number: function(rule, elem) {
doSomeStuff('run before number message');
return 'Invalid phone number';
},
minlength: function(rule, elem) {
doSomeStuff('run before minlength message');
return 'Minimum length: 6';
}
}
}
Check the -- JSFiddle Example -- here.

Jquery vaildation plugin multiple error in one field using localization

I'm using jquery validation plugin and need to use localization for different language.
The original code would be like this
$('#form').validate({
rules: {
'checkbox1[]': { required: true },
'email': { required: true,
email: true
},
},
messages: {
'checkbox1[]': "Please choose at least 3",
email: {
required:'Please input email',
email: 'Please input valid email'
}
}
});
If I use localization, my message_en.js would be:
$.extend($.validator.messages, {
required: "Please choose your answer.",
email: "Please input valid email.",
});
However, I shared the "required" message in email field. It means that if I didnt input email, the error message would become "Please choose your answer.". Obviously, it is not appropriate.
So, how can I separate the error message?

ember, ember-validations match password and confirmation

I've been successful in modifying the default classes and the negative class values to make sure that my ember-validations appear the way I want them to on load. Now, I'm diving into ember-validations. One of the validator routines I'm having little success with is the match: property. Here's the code from my controller:
userLoginPass: {
presence: { message: " password required" },
match: { property: { "userRegPassConfirm" } }
},
userRegPassConfirm: {
presence: { message: " confirm password required" },
match: { property: { "userLoginPass" } }
},
However, neither field barks on mis-match between them. Something is missing. Anyone had experience with this?
Here's the doc that's giving me problems: https://github.com/lcoq/ember-validations#match
Many Sincere Thanks!
Turns out the answer is a two part process which includes making sure the confirmation field is labelled whateverConfirmation in addition to the confirmation property like so:
password: {
confirmation: true,
presence: {
message: ' password required'
}
},
passwordConfirmation: {
presence: {
message: ' please confirm password'
}
}
as seen on the ember-validations documentation page:
https://github.com/dockyard/ember-validations#confirmation
You should define the validations object on your controller (or model) as follows:
validations: {
userLoginPass: {
confirmation: {
message: 'Your message here.'
}
}
}
And then put an {{input userLoginConfirmation}} within your template.

Jquery Validation, Show Custom message with value from id

I Use jquery.validate.js for field validation.
Its display error messages as per declare in .js file for appropriate field.
I use this code for custom validation for email field.
<script type="text/javascript">
$().ready(function() {
$("#formcustomplan").validate({
email: {
required: true,
email: true
},
messages: {
email: "Email is required in valid format"
}
});
});
</script>
Its display message like that "Email is required in valid format"
But I want that error message fetch email id and display it in error message.
(Ex. if I enter test.com in email box. it should display "test.com is not valid email" in error message)
Here is Fiddle
JQuery Validate actually supports functions as messages directly, so you don't have to do anything super hacky to make this work. It is not well documented but you can do this:
messages: {
email: {
email: function (params, element) {
return '"'+$(element).val()+'" is not a valid value';
}
}
}
Quote from the docs:
Each message can be a String or a Callback. The callback is called in
the scope of the validator, with the rule’s parameters as the first
argument and the element as the second, and must return a String to
display as the message.
Working example: http://jsfiddle.net/ryleyb/XUM8k/11/
You can reset the default email validation message by using:
$.validator.messages.email = "Your custom message for email field"
In your case, you can prepend the new value from user's input to the custom message. Here is the trick using keyup:
$('.email').keyup(function () {
$.validator.messages.email = $('.email').val() + ' is not valid email';
});
$("#formcustomplan").validate({
email: {
required: true,
email: true
}
});
Updated Fiddle

How to change the content of "This field is required" in Jquery form validation plugin?

How can I change the general message of "This field is required" in Jquery form validation plugin to "このフィールドは必須です"? The color of the message can be changed by using the following code:
<style type="text/css">
label.error {color: red;}
</style>
But how to change the content?
I want to change all "This filed is required" messages.
I want to change all "required" messages to "このフィールドは必須です".
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
}
}
})
only changes specific message for specific rule and specific element.
I wrote
messages: {
required:"このフィールドは必須です"
}
but it doesn't work.
I tried the accepted answer and it did not work for me at all. I did more searching on Google and found this article.
Using this line of code solved my problem:
$.validator.messages.required = "Your new required message here!";
The messages object has several interesting attributes to adjust:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
...
}
See the source.
These can be set as defaults via the setDefaults() method:
$.validator.setDefaults({
messages: {
required: "このフィールドは必須です"
}
});
You can use the messages option in the validate method.

Categories