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
Related
I am new to ReactJs, I am Using Ant-design For Registration Form and applied some validation Rules. I want to validate User when user enter something in fields, message ( Username must be Unique ) is shown to the user for guidance . But when I enter something Error is occur Unknown rule type username.
Code of Form
<FormItem>
{getFieldDecorator('username', {
rules: [
{
type: 'username',
message: 'Username Must be Unique!',
},
{
required: true,
message: 'Please Enter Your Username',
},
],
})(<Input placeholder="Username" />)}
</FormItem>
You must be confusing type with something else.
According to this page: https://ant.design/components/form/ , type will rather be referenced to something like string or boolean.
EDIT:
...
{
type: string,
message: 'Username Must be a string',
},
...
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.
I have a form that collects some personal information from the end user and triggers some JS validation functions. For simplistic examples lets just say the form has first name, last name, and email address.
Now once the form is filled out and submitted, if I go back to it my browser pre-populates the form like you would expect. The problem is when I go to submit (without changing any fields or tabbing through them) the plugin does not go back and validate those fields (if they have been pre-populated.
I am not sure WHY it is not validating the pre-populated fields. And I am not sure how to get it to. Does anyone have any ideas? I am running the latest version of jQuery and the validate plugin (http://jqueryvalidation.org/).
Sample code:
$(document).ready(function() {
var rules = {
FirstName: 'required',
LastName: 'required',
EmailAddress: {
required: true,
customEmail: true,
checkAccountExists: true
}
};
//And field specific (and even validation type specific) error messages
var messages = {
FirstName: 'Your first name is required.',
LastName: 'Your last name is required.',
EmailAddress: {
required: 'Your email address is required.',
customEmail: 'You must enter a valid email address.',
checkAccountExists: 'We already have an account with that email address. Please login.'
}
};
$('#applicationForm').validate({
//debug: true,
rules: rules,
messages: messages,
errorElement: 'span'
});
});
jQuery.validator.addMethod('customEmail', function(value, element) {
return this.optional(element) || /[A-z0-9._%-+]{1,}#[A-z0-9._%-]{1,}\.[A-z0-9._%-]{1,}/.test(value);
}, 'Invalid email address entered.');
jQuery.validator.addMethod('checkAccountExists', function(value, element) {
if (this.optional(element)) {
return true;
}
var url = $(element).attr('checkEmailUrl');
$.ajax({
type: 'GET',
data: {EmailAddress: value, check: true},
dataType: 'json',
url: url,
success: function(response) {
var dataArray = jQuery.parseJSON(response);
//If it exists then trigger the popup
if (dataArray.result == 'EXISTS') {
kclHelpers.showEmailExistsModal(value);
}
}
});
return true; //If it exists the popup will handle it. We are just using this to trigger it
}, 'An account under the specified email address already exists. Please sign in.');
A simple solution that I employ is just to trigger the blur event already bound to elements you want to validate. You can check the value of each element to determine if they should be validated which prevents this operation from triggering them before the user has interacted.
$(window).load(function() {
//pre-highlight fields with values
$('input[type=text], input[type=email], input[type=url], input[type=password], select').filter(function() {
return $.trim($(this).val()) != '';
}).blur();
});
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.
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.