I am working on a form which adds up to 10 fields dynamically based on user selection. I have to validate all the dynamically added elements. Till here everything is working fine except the error messages. For example if the user does not enter field 2 value and submits the form, the error message should be "Please Enter Visitor 2's Name". If user does not enters field 3 then the error should change to "Please Enter Visitor 3's Name". I have it working all except for the messages which are showing same for all the fields. Suppose user added 5 field. All the fields show up the same error message, "Please Enter Visitor 5's Name" for all input fields.
Here is my code:
$('.visitors_name').each(function (key, value) {
$(this).rules('add', {
required: true,
minlength: 2,
maxlength: 50,
messages: {
required: "Please Enter Visitor "+key+"'s Name",
}
});
});
Any help please?
You would have to use a function to dynamically construct and return a message...
$('.visitors_name').each(function (key, value) {
$(this).rules('add', {
required: true,
minlength: 2,
maxlength: 50,
messages: {
required: function() {
return "Please Enter Visitor " + key + "'s Name";
}
}
});
});
DEMO: jsfiddle.net/6z9Lv8pk/
Related
I'm building conditional form with vue and stuck on how conditionally validate input field based on the previous users choice. I'll appreciate any help.
in the form I have dropdown menu with payment choices (terminal, payconiq, cash etc).
Second input field is the link user need to add. If user choose terminal, he should add to link input an IP Address. If not - url address.
I receive a paymentId from options with #click, send it to the store and get it from the store with computed property.
The problem is that my vuelidate does not read the condition
const typefromStore = computed(() => paymentStore.paymentType) // here I get typeId from store
const validations = {
description: { required },
type: { required },
link: {
required,
type: typefromStore.value === 1? ipAddress : url // always checks for url and give an error if I need to input IP address
},
}
I read documentation, but I didn't find how to check second input field based on the value of the previous. Only cases when previous field is invalid. But data from dropdown list is always valid.
I need to use the value of 'type' somehow to check conditionally value of link.
Found the solution. May be will help someone. Needed to put validation in computed. No store needed
let newMethod = reactive({
instanceId: 1,
description: '',
type: -1,
link: '',
active: true,
})
const rules = computed(() => {
const localRules = {
description: { required },
type: { required },
link: {},
}
if (newMethod.type === 1) {
localRules.link = {
ipAddress,
}
}
else {
localRules.link = {
url,
}
}
return localRules
})
const v$ = useVuelidate(rules, newMethod, { $autoDirty: true })
I am trying to implement a custom validator for a paper-input. In this particular case, the control should accept positive numbers. However, not only only will the control only accept positive numbers, it will also run some other custom validation logic to determine if the entry falls within a constantly changing (dynamic & calculated) upper and lower limit. Ideally, the paper-input control's error-message text will also change depending on what part of the custom validator check failed.
In the past, I was able to implement this sort of thing with the gold-email-input element. In that case, the control checks for an entry that matches a regular expression for email addresses (i.e. implements a type-check). It also calls a backend api to see if the email address entered (as it is being typed), already exists in a database. If it exists in the database, the control fails validation and updates the control's validation error-message with a custom message. If it does not exist, it passes validation. As you might have imagined by this description, this was for a user registration UI element whereby the provided email should not already exist in the current list of user accounts. Here is an excerpt of that working code below for your reference:
<gold-email-input id="userEmail" label="Email" required auto-validate value="{{userEmail}}" error-message$="{{_getEmailErrorMsg(0)}}" invalid="{{_emailInvalid}}" validator="_validateEmail"></gold-email-input>
<iron-signals on-iron-signal-email-used="_accountFound" on-iron-signal-email-available="_accountNotFound"></iron-signals>
<script>
var emailErrors = ["Provide a valid email address", "Address already used"];
// Register the polymer element
Polymer({
properties: {
userEmail: {type: String, value: null},
validated: {type: Boolean, notify: true}, //overall validity state of entire element
_emailInvalid: {type: Boolean, value: true, observer: "_validityChanged"}, // validity state of email input itself
},
ready: function() {
// Called before attached
this.$.userEmail.validate = this._validateEmail.bind(this);
},
_accountFound: function() {
// Listener function intended to fire when the user email address/account was found
console.log(this.nodeName + " accountFound listener called\n");
this.$.userEmail.errorMessage = this._getEmailErrorMsg(1);
this._emailInvalid = true;
},
_accountNotFound: function() {
// Listener function intended to fire when the user email address/account was not found
console.log(this.nodeName + " accountNotFound listener called\n");
this.$.userEmail.errorMessage = this._getEmailErrorMsg(0);
this._emailInvalid = false;
},
_checkAccountExistance: function() {
if (this.userEmail !== undefined && this.userEmail != null) {
this.$.user.checkEmailAvailability(this.userEmail);
} else {
this._emailInvalid = true;
}
},
_getEmailErrorMsg: function(code) {
if (code !== undefined && code != null) {
return emailErrors[code];
} else {
return "";
}
},
_validateEmail: function() {
// Custom validator function for email input (also checks if email has already been associated to any user accounts)
console.log(this.nodeName + " validateEmail validator called\n");
// Check if proper email address format (W3C Spec Regex used)
var validEntry = /^[a-zA-Z0-9.!#$%&�*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.userEmail);
if (validEntry) {
this._emailInvalid = false;
this._checkAccountExistance();
} else {
this._emailInvalid = true;
}
}
_validityChanged: function(newVal, oldVal) {
// set the containing/parent element's overall validity state
this.validated = (!this._nameInvalid && !this._pwInvalid && !this._phoneInvalid && !this._emailInvalid && !this._countryInvalid && !this._regionInvalid && !this._cityInvalid);
},
});
</script>
Now, if I try to implement a similar approach with the paper-input component, it does not work. The custom validator function does not get called at any point. Is there something inherently different with paper-input compared to gold-email-input? Should it not treat validation the same way?
<paper-input id="xpos" label="Horizontal Position" required auto-validate value="{{XPos}}" error-message="Provide the x position" invalid="{{_xInvalid}}" validator="_validatePosition"></paper-input>
<script>
// Register the polymer element
Polymer({
properties: {
xPos: {type: Number},
validated: {type: Boolean, notify: true}, //overall validity state of entire element
_xInvalid: {type: Boolean, value: true, observer: "_validityChanged"}, // validity state of xpos input itself
},
ready: function() {
// Called before attached
this.$.xpos.validate = this._validatePosition.bind(this);
},
_validatePosition: function() {
console.log(this.nodeName + " validatePosition validator called\n");
// perform some validation code here like the gold-email-input example above
}
});
</script>
I have implemented a custom validation function using the example referenced in the SimpleSchema documentation for validating the uniqueness of a username. In the example, an asynchronous call is made and a custom validation message is displayed if the username is found to already exist.
There is a note, that indicates that if all of the form fields are valid, the form will be submitted, however user creation will fail due to the "unique: true" requirement specified in the schema. Here is the relevant portion of the code from the example docs:
username: {
type: String,
regEx: /^[a-z0-9A-Z_]{3,15}$/,
unique: true,
custom: function () {
if (Meteor.isClient && this.isSet) {
Meteor.call("accountsIsUsernameAvailable", this.value, function (error, result) {
if (!result) {
Meteor.users.simpleSchema().namedContext("createUserForm").addInvalidKeys([{name: "username", type: "notUnique"}]);
}
});
}
}
}
In my case, I have the code working where I am testing if an activation code is valid, I even get the interface to display the error, however since there is no other "schema" failure, the form submits, despite the invalid response... do I need to manually prevent form submission (i.e. using jQuery), or is there something in SimpleSchema I should use instead?
activationCode: {
type: String,
label: "Activation Code",
max: 200,
min: 10,
regEx: /^(?=.*[A-Z])(?=.*\d).+$/,
custom: function() {
if (Meteor.isClient && this.isSet) {
Meteor.call("validateActivationCode", this.value, function(error, result) {
if (result && !result.isValid) {
Clients.simpleSchema().namedContext("signupForm").addInvalidKeys([{
name: "activationCode",
type: "notValid"
}]);
return false;
}
});
}
}
}
Thank You
$("#mygrid").kendoValidator().data("kendoValidator").validate() method always returns true even if there are validation errors for some of the input fields in the grid. On first time load the validation works fine but during edit the next time it does not show the tooltip, please help me resolve this issue.
I have added a validation template using schema of the grid:
schema: {
model: {
id: "AuctionID",
fields: {
AuctionID: {
editable: false,
type: "number"
},
AuctionName: {
type: "string",
validation: {
required: { message: "An Auction Name is Required!" },
validateAuctionName: function (input) {
if (input.attr("data-bind") == "value:AuctionName") { // check if this is the element to validate
alert(input.val().length);
if (input.val().length > 10) {
input.attr("data-validateAuctionName-msg", "AuctionName can only have a maximum of 10 characters.");
return false;
}
else
return true;
}
return true;
}
}
}
}
}
}
The method you are using is not triggering validation as it interrogates "this" and validates it if it is a kendo widget with validation enabled.
I found this way to force validation - get hold of model and trigger change on property you want to validate:
model.trigger("set", { field: "FinishTime", value: model.FinishTime });
When I attempt to create a method to use the methods provided in the additional-methods.js file I get the intended validation. However, if the user inputs a wrong value, instead of displaying the exception defined in the additional-methods.js file, the user sees the title of the current element, which is currently being used for type-hinting.
My JavaScript looks like this:
//setup input validation
validator = form.validate({
rules: {
city: {
required: true,
lettersonly: true
}
}
});
$('input, textarea').blur(function(){
element = $(this);
// if the user gave no value then show the this field is required
if(element.val() == element.attr('title')){
refreshError(element, 'This field is required');
}else if(element.val() == '') { //if the value is empty then check if it was required, also check if it had an input hint
//if the element is required display the error message
if(element.hasClass('required')){
refreshError(element, 'This field is required');
}
//if the title exists then we assume it is the input hint
if(element.attr('title') != ''){
element.val(element.attr('title'));
element.addClass('inputHint');
}
}else{
//if we got input validate it
response = element.valid();
//if we got an error clear the old one(conditional on existance), and display the new one. Otherwise clear any old error
if(!response){
this.defaultShowErrors();
}else{
errorId = element.attr('id')+'Error';
$('#'+errorId).remove();
}
}
});
With the relevant part of the form being:
<label for="city">City:</label>
<input type="text" name="city" id="city" class="required inputHint" title="Your city here" />
Any ideas as to what I am doing wrong? I am using the 1.9.0 version of the jQuery Validator plugin
NB: I thought I had hit the nail on the head after reading: addMethod() of jQuery validation plugin display error from title attribute but after trying:
//setup input validation
validator = form.validate({
rules: {
city: {
required: true,
lettersonly: true
}
},
messages: {
city: {
lettersonly: "you must give a valid city"
}
}
});
I found that nothing changed.
I just ran into this error and came across the ignoreTitle option:
//setup input validation
validator = form.validate({
ignoreTitle: true,
rules: {
city: {
required: true,
lettersonly: true
}
},
messages: {
city: {
lettersonly: "you must give a valid city"
}
}
});