JQuery Validate OR conditional [duplicate] - javascript

I have one field which can contain email or mobile (in my case mobile is 8 digits).
I already tried two approaches (both examples doesn't work, because 'element' do not have validate method):
First approach: create custom method and do both validations there, but then I have to create my own email and mobile validation - I couldn't find a way how to reuse jQuery validation rules in new methods. This is what I'd like to have:
jQuery.validator.addMethod("mobileoremail", function(value, element) {
return this.optional(element) ||
element.validate({ rules: { digits: true, rangelength: [8, 8] } }) ||
element.validate({ rules: { email: true } });
}, "Invalid mobile or email");
Second approach: create dependent rules. And also in this case I couldn't find a way how to reuse jQuery validation rules.
{ myRules: {
rules: {
user: {
required: true,
email: {
depends: function(element) {
return !element.validate({ rules: { mobile: true } });
}
},
mobile: {
depends: function (element) {
return !element.validate({ rules: { email: true } });
}
}
}
}
}
}

How about the following validation method...
$.validator.addMethod("xor", function(val, el, param) {
var valid = false;
// loop through sets of nested rules
for(var i = 0; i < param.length; ++i) {
var setResult = true;
// loop through nested rules in the set
for(var x in param[i]) {
var result = $.validator.methods[x].call(this, val, el, param[i][x]);
// If the input breaks one rule in a set we stop and move
// to the next set...
if(!result) {
setResult = false;
break;
}
}
// If the value passes for one set we stop with a true result
if(setResult == true) {
valid = true;
break;
}
}
// Return the validation result
return this.optional(el) || valid;
}, "The value entered is invalid");
Then we could set up the form validation as follows...
$("form").validate({
rules: {
input: {
xor: [{
digits: true,
rangelength: [8, 8]
}, {
email: true
}]
}
},
messages: {
input: {
xor: "Please enter a valid email or phone number"
}
}
});
See it in action here http://jsfiddle.net/eJdBa/

Related

Vee validate get previous value after vue set

I want to update v-model value by code and validate that field. So I am using vue.set method for updating value and then call $validator.validate.
my code is something like that.
Vue.set(model,property, value);
vm.$validator.validate(property).then(function (valid) {
if (!valid) {
vm.$validator.flag(property, {
touched: true,
dirty: true
});
}
});
my validation rules code is somethng like that:
Validator.extend("val_compulsory", {
getMessage(field, args) {
return args[0];
},
validate(value) {
return {
valid: !!value,
data: {
required: true
}
};
}
}, { computesRequired: true });
but in val_compulsory validator I always get previous value which is before vue.set. Is there any way to get latest value in vee-validator validation methods after vue.set?
Try this:
Vue.set(model,property, value);
vm.$nextTick(function() {
vm.$validator.validate(property).then(function (valid) {
if (!valid) {
vm.$validator.flag(property, {
touched: true,
dirty: true
});
}
});
});

ValidateJS Async REST Call

I am trying to create a validator which makes a REST call to my server and grabs a value the database. A few problems, when my validator is enabled it only validates that input and not the rest of the constraints. Also, I keep getting this error for the Id length [validate.js] Attribute id has a non numeric value for length, I do not receive this error when I am not using the async validator.
Here is my validator:
validate.validators.myAsyncValidator = function(input, options, key, attributes) {
return new validate.Promise(function(resolve, reject) {
if (!validate.isEmpty(input.value)) {
axios.get('/data-management/verify-data', {
params: {
id: input.value,
filter: options[0]
}
})
.then(function(response) {
if (response.data !== options[1]) resolve(" already exists!");
})
.catch(function(error) {
resolve(": Error, try again.");
});
}
}); };
Here are my constraints:
var constraints = {
email: {
presence: true,
email: true
},
password: {
presence: true,
format: {
// We don't allow anything that a-z and 0-9
pattern: "^[a-zA-Z0-9!##$&()\\-`.+,/\"]*$",
// but we don't care if the username is uppercase or lowercase
flags: "i",
message: "Must contain at least 1 Uppercase, 1 Lowercase, 1 Number, and 1 Special Character"
},
length: {
minimum: 6,
message: "Must be at least 6 characters"
}
},
"confirm-password": {
presence: true,
equality: {
attribute: "password",
message: "^The passwords does not match"
}
},
district: {
presence: true
},
id: {
presence: true,
length: {
minimum: 5,
maximum: 20,
message: "Must be between 6-20 characters"
},
format: {
// We don't allow anything that a-z and 0-9
pattern: "[a-z0-9]+",
// but we don't care if the username is uppercase or lowercase
flags: "i",
message: "can only contain a-z and 0-9"
},
myAsyncValidator: ["signup", false]
}};
And me hooking up my constraints to my form:
var inputs = document.querySelectorAll("input, textarea, select");
for (var i = 0; i < inputs.length; ++i) {
inputs.item(i).addEventListener("change", function(ev) {
// var errors = validate.async(form, constraints).then(function(data) {
// console.log("data");
// });
var obj = this;
var n = this.name;
validate.async(form, constraints).then(function() {
}, function(errors) {
showErrorsForInput(obj, errors[n.valueOf()]);
});
});
}
function handleFormSubmit(form, input) {
// validate the form against the constraints
// var errors = validate.async(form, constraints).then(function(data) {
// console.log("data2");
// });
validate.async(form, constraints).then(function() {
}, function(errors) {
showErrors(form, errors || {});
if (!errors) {
showSuccess();
}
});
I can provide the functons showErrors(), showSuccess(), and showErrorsForInput() if needed.
Thanks!
Found a solution. Checked the ID constraints first, once they were gone, I checked for rest of the constraints. Also added a tokenizer to remove the length error I was receiving.
Here is the updated code:
validate.validators.checkExists = function(input, options) {
return new validate.Promise(function(resolve, reject) {
if (!validate.isEmpty(input.value)) {
axios.get('/data-management/verify-data', {
params: {
id: input.value,
filter: options[0]
}
})
.then(function(response) {
if (response.data !== options[1]) resolve("already exists!");
else resolve();
})
.catch(function(error) {
reject(": Error, try again.");
});
} else resolve();
});
};
// These are the constraints used to validate the form
var constraints = {
email: {
presence: true,
email: true
},
password: {
presence: true,
format: {
pattern: "^[a-zA-Z0-9!##$&()\\-`.+,/\"]*$",
flags: "i",
message: "Must contain at least 1 Uppercase, 1 Lowercase, 1 Number, and 1 Special Character"
},
length: {
minimum: 6,
message: "must be at least 6 characters"
}
},
"confirm-password": {
presence: true,
equality: {
attribute: "password",
message: "^The passwords does not match"
}
},
firstName: {
presence: true
},
lastName: {
presence: true
},
district: {
presence: {
message: "must be selected"
}
}
};
var idConstraints = {
id: {
presence: true,
length: {
minimum: 5,
tokenizer: function(input) {
try {
return input.value;
} catch (e) {
return " ";
}
}
},
checkExists: ["signup", false]
}
};
// Hook up the form so we can prevent it from being posted
var form = document.querySelector("form#signup");
form.addEventListener("submit", function(ev) {
ev.preventDefault();
handleFormSubmit(form);
});
// Hook up the inputs to validate on the fly
var inputs = document.querySelectorAll("input, textarea, select");
for (var i = 0; i < inputs.length; ++i) {
inputs.item(i).addEventListener("change", function(ev) {
var obj = this;
var n = this.name;
validate.async(form, idConstraints).then(function() {
var moreErrors = validate(form, constraints) || {};
showErrorsForInput(obj, moreErrors[n.valueOf()]);
}, function(errors) {
showErrorsForInput(obj, errors[n.valueOf()]);
});
});
}
function handleFormSubmit(form) {
validate.async(form, idConstraints).then(function() {
var errors = validate(form, constraints);
showErrors(form, errors || {});
}, function(errors) {
showErrors(form, errors || {});
if (!errors) {
showSuccess();
}
});
}

Add dynamic form validation callback to field

I am using formValidation.io and need to dynamically add a callback type validator within a class so that it can use a class property. The issue is that I initially pass my validator options into a super call that has some form validation procedures. But this means I do not have initial access to class properties.
So to do this I was trying to use updateOption but it definitely does not begin to validate this.
class MyForm extends Form {
var validatorOptions = {
fields: {
phoneNumber: {
validators: {
regexp: {
regexp: Regexp.phone,
message: "Please enter a valid phone number"
}
}
}
}
};
super({
validator: {
options: validatorOptions
}
});
var self = this;
this._cachedPhoneNumbers = [];
var phoneValidatorCallback = {
message: "This number is already in use",
callback: function(value, validator, $field) {
if ($.inArray(value, self._cachedPhoneNumbers) > -1)
return false;
return true;
}
}
// ref to validator is definitely valid!
this.validator.updateOption('phone', 'callback', 'callback', phoneValidatorCallback);
}
Here is the answer. I simply misused the function.
class MyForm extends Form {
var validatorOptions = {
fields: {
phoneNumber: {
validators: {
regexp: {
regexp: Regexp.phone,
message: "Please enter a valid phone number"
},
callback: {
message: 'This number is in use',
callback: function() {
return true;
}
}
}
}
}
};
super({
validator: {
options: validatorOptions
}
});
var self = this;
this._cachedPhoneNumbers = [];
function phoneValidatorCallback(value, validator, $field) {
if ($.inArray(value, self._cachedPhoneNumbers) > -1)
return false;
return true;
}
// ref to validator is definitely valid!
this.validator.updateOption('phone', 'callback', 'callback', phoneValidatorCallback);
}

Meteor Method.call issue in jquery-validation

I have a form to change password. I need to validate the old password. But jquery addMethod is always return false in Meteor.call. How to make it workable. Or is there any way? My bellow code will be more details about my issue.
$.validator.addMethod( 'checkPassword', ( oldpassword ) => {
var digest = Package.sha.SHA256(oldpassword);
Meteor.call('checkPassword', digest, function(err, result) {
var res = result.error != null; // even if this is "true", error message is visible.
return res;
});
});
$( "#changepassword" ).validate({
rules: {
oldpassword: {
required: true,
checkPassword: true
}
},
messages: {
oldpassword: {
required: "Please enter your Old Password",
checkPassword: "Password doesnt match!!!" //this message is visible all the time.
} }
});
Here is my method call
Meteor.methods({
checkPassword: function(digest){
if (Meteor.isServer) {
if (this.userId) {
var user = Meteor.user();
var password = {digest: digest, algorithm: 'sha-256'};
var result = Accounts._checkPassword(user, password);
return result;
}
}
}
});
here the meteor package

Javascript Validate URL

I use the following code to validate URL in client side. My question is if there is a better way to do the same..My question is not about the regex that i am using (just the overall way of writing)
this.validators.myUrl = function(value) {
if (!_.isUndefined(value) && !_.isNull(value)) {
if ($.trim(value).length == 0) {
return {
isValid: true
}
} else {
return /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($.trim(value)) == true ? {
isValid: true
} : {
isValid: false,
message: "Enter a valid URL"
};
}
} else {
if ($.trim(value).length == 0) {
return {
isValid: true
}
}
}
};
Why you don't want to use ready plugins/libraries?
You can have used jQuery Validation Plugin and its url method.
All what you need is:
$( "#myform" ).validate({
rules: {
field: {
required: true,
url: true
}
}
});
where myform is id of your form.

Categories