开发者

cannot convert to object

开发者 https://www.devze.com 2023-02-04 14:10 出处:网络
if i execute the following code i get a cannot convert to object error; Uncaught exception: TypeError: Cannot convert \'validation.messages.field\' to object

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).

  1. 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.
  2. eval is evil. You would have to pollute the global namespace with functions named required and minlength.

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消