I have downloaded jquery validation.js and using it. I need to validate for alphabets in that. For this what i need to do in validation.js
My js is like this,
categoryname: {
required: true,
minlength: 2
},
messages: {
categoryname: "Enter the category name",
the above code ask for required field and if field is empty it will show the below message. here i need to validate for only alphabets too.......
jQuery.validator.addMethod("alphanumericspecial", function(value, element) {
return this.optional(element) || value == value.match(/^[-a-zA-Z0-9_ ]+$/);
}, "Only letters, Numbers & Space/underscore Allowed.");
jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
jQuery.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || value == value.match(/^[a-z0-9A-Z#]+$/);
},"Only Characters, Numbers & Hash Allowed.");
U can create functions easily like this bro..
You will need to add extra method to validation library, like that:
$.validator.addMethod("alpha", function(value,element)
{
return this.optional(element) || /^[a-zA-Z]$/i.test(value);
}, "Alphabets only");
Then you can add it to your validation rules.
Otherwise, you can define generic "regexp" rule, as described in this answer
Related
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 handsontable and I don't know what event that I need to validate a specific cell if its empty or not.
technically I have specific cell to be a required cell, if the cell is empty then it will call a callback or return false after executing a post.
I have used beforeChange() function before and I think it is not appropriate event for the issue.
Here's an image link.
What you want to do is use the validator option in the columns setting.
Here is some more information on validators and an example but below is the code that would go with it.
emptyValidator = function(value, callback) {
if (isEmpty(value)) { // isEmpty is a function that determines emptiness, you should define it
callback(false);
} else {
callback(true);
}
}
Then in the columns setting, supply each column and if that column should have all its cells be non-empty, supply this as the validator, just like they show in the handonstable example page.
Here is my work around: http://jsfiddle.net/Yulinwu/s6p39uje/
Firstly, you can add a custom property named required to the column settings.
hot = new Handsontable(container, {
...
columns: [{
...
}, {
type: 'numeric',
format: '$ 0,0.00',
required: true, // Add a new setting named required
validator: Handsontable.NumericValidator
}]
});
Then, you can add a listener to beforeValidate event using addHook, which returns false if a cell is required but empty.
hot.addHook('beforeValidate', function(value, row, prop, source) {
var ifRequired = this.getCellMeta(row, prop).required;
console.log(ifRequired);
if (ifRequired && value === '') {
return false
} else {
return 0
}
});
Use allowEmpty:false for that column like:-
{
data: 'EmpNo',
type: 'numeric',
allowInvalid: false,
allowEmpty:false
}
And in the setting of handsontable use afterValidate as below-
afterValidate: function (isValid, value, row, prop, source) {
if (!isValid) {
$("#submitBtn").prop("disabled", true);
alert('Only non empty numbers are allowed');
}
else {
$("#submitBtn").prop("disabled", false);
}
}
I'm using mongoose and trying to set a custom validation that tells the property shall be required (ie. not empty) if another property value is set to something. I'm using the code below:
thing: {
type: String,
validate: [
function validator(val) {
return this.type === 'other' && val === '';
}, '{PATH} is required'
]}
If I save a model with {"type":"other", "thing":""} it fails correctly.
If I save a model with {"type":"other", "thing": undefined} or {"type":"other", "thing": null} or {"type":"other"} the validate function is never executed, and "invalid" data is written to the DB.
As of mongoose 3.9.1, you can pass a function to the required parameter in the schema definition. That resolves this problem.
See also the conversation at mongoose: https://github.com/Automattic/mongoose/issues/941
For whatever reason, the Mongoose designers decided that custom validations should not be considered if the value for a field is null, making conditional required validations inconvenient. The easiest way I found to get around this was to use a highly unique default value that I consider to be "like null".
var LIKE_NULL = '13d2aeca-54e8-4d37-9127-6459331ed76d';
var conditionalRequire = {
validator: function (value) {
return this.type === 'other' && val === LIKE_NULL;
},
msg: 'Some message',
};
var Model = mongoose.Schema({
type: { type: String },
someField: { type: String, default: LIKE_NULL, validate: conditionalRequire },
});
// Under no condition should the "like null" value actually get persisted
Model.pre("save", function (next) {
if (this.someField == LIKE_NULL) this.someField = null;
next()
});
A complete hack, but it has worked for me so far.
Try adding this validation to the type attribute, then adjust your validation accordingly. E.g.:
function validator(val) {
val === 'other' && this.thing === '';
}
thing: {
type: String,
required: function()[{
return this.type === 'other';
}, 'YOUR CUSTOM ERROR MSG HERE']
}
I have a form with 4 tabs and I want to be able to validate the current tab before it switches to the new tab when the user clicks on any other tab. This is what I have so far:
$("#tabs").tabs({
beforeActivate: function(event, ui) {
var tab = ui.oldTab.index();
var valid = true;
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {
valid = false;
};
if (!valid) {
//alert('not valid');
event.preventDefault();
}
else {
alert('valid');
}
}
});
The above function prevents the user from selecting a different tab if some fields are not filled in. I also have validate function setup as follows:
$("#form1").validate({
rules: {
txbYPSchool: { required: true, nowhitespace: true },
txbYPSubjectDesc: { required: true, nowhitespace: true }
},
messages: {
txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'",
txbYPSubjectDesc: "*This field is mandatory"
},
ignore: ""
});
How can I get the validation to run and display the error messages when a user tries to change tabs when there are incomplete fields still on the present tab? I want to be able to do this without a button click and only when a user tries to change tabs but I dont know how to incorporate the validation function into the first function.
Am using jquery 1.9.1 and the latest validation plugin.
Thanks
You can possibly use the plugin's .valid() method.
Replace this...
if (!valid) {
with this...
if !($("#form1").valid()) {
Then since the plugin is checking validity, you can get rid of all this...
var valid = true;
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {
valid = false;
};
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"
}
}
});