if i execute the following code i get a cannot convert to object error; Uncaught exception: TypeError: Cannot convert 'validation.messages.field' to object
$.fn.validate = function(validation) {
$.each(validation.rules, function(field, fieldRules){
$.each(fieldRules, function(rule, ruleValue){
var 开发者_如何学运维fieldValue = $('[name=' + field + ']').val();
if (eval(rule + '(fieldValue, ruleValue)') == false){
alert(validation.rules.field.rule);
return false;
}else{
return true;
};
});
});
}
the problem is the
alert(validation.messages.field.rule);
'field' = 'persoon_voornaam' and 'rule' = 'required'
and validation.messages.persoon_voornaam.required
works just fine.
What am i doing wrong?
validation is a JSON that look like this:
{
rules: {
persoon_voornaam: {
required: true,
minlength: 5,
},
postcode_bestemming: {
required: true,
minlength: 7,
},
},
messages: {
persoon_voornaam: {
required: 'Dit veld is verplicht',
minlengt: 'Dit veld moet minstens 5 lang zijn',
},
}
}
It has to be:
alert(validation.rules[field][rule])
To clarify:
validation.rules
is an object while field
is a variable with the string 'persoon_voornaam'
.
validation.rules.persoon_voornaam
is an object and the same as validation.rules['persoon_voornaam']
.
The answer to your problem was already given. I want to propose an improved version of your code, to make your code more reusable (otherwise there is not need to attach it to the jQuery object).
- Your are not making use of the fact that this function will be applied to elements selected by your selector. You are selecting all form elements that match a certain name.
eval
is evil. You would have to pollute the global namespace with functions namedrequired
andminlength
.
The following code tries to adress these issues:
$.fn.validate = (function() {
var validators = {
'required': function(value, ruleValue) {
/*...*/
},
'minlength': function(value, ruleValue) {
/*...*/
}
};
return function(validation, config) {
return this.each(function() {
var errors = [];
var $element = $(this);
$.each(validation.rules, function(field, fieldRules){
$.each(fieldRules, function(rule, ruleValue){
var fieldValue = $element.find('[name=' + field + ']').val();
if (rule in validators && validators[rule].call(null, fieldValue, ruleValue) === false){
var message = (field in validation.messages && rule in validation.messages[field]) ? validation.messages[field][rule] : '';
errors.push([field, rule, message])
return false;
}
});
});
// the following part could be written shorter as
// var cb = erros.length > 0 ? 'onerror' : 'onsuccess';
// if(typeof config[cb] === 'function') {
// config[cb](errors);
// }
// but it will pass an empty array to success (which is not a problem
// I just though it might be confusing)
if(erros.length > 0) {
if(typeof config.onerror === 'function') {
config.onerror(errors);
}
}
else {
if(typeof config.onsuccess === 'function') {
config.onsuccess();
}
}
});
}
}());
Then you can call the function with:
$('#yourFormId').validate(valditation, {
onerror: function(errors) {
// do something with errors
},
onsuccess: function() {
// do something else
}
});
and it will only validate the fields in the form.
精彩评论