Archive

Posts Tagged ‘validations’

Cross field model validation in extjs4

I dont see an easy way to make validations where one field depends on another. I think they must have forgotten to support it. What is missing is the model instance passed to the validation method. Now it looks like this:
    function(config, value)
and we would like it to look like this
    function(config, value, model)
, then we would have access to all fields.

But we just need to override Ext.data.Model.validate() and pass the model instance to the validation function as an extra parameter:

valid = validators[type](validation, this.get(field), this);

Ext.override(Ext.data.Model, {
    validate: function() {
        var errors = Ext.create('Ext.data.Errors'),
                validations = this.validations,
                validators = Ext.data.validations,
                length, validation, field, valid, type, i;

        if (validations) {
            length = validations.length;

            for (i = 0; i < length; i++) {
                validation = validations[i];
                field = validation.field || validation.name;
                type = validation.type;
                valid = validators[type](validation, this.get(field), this);

                if (!valid) {
                    errors.add({
                        field  : field,
                        message: validation.message || validators[type + 'Message']
                    });
                }
            }
        }

        return errors;
    }
});

Now we have access to the model instance:

Ext.data.validations.range = function(config, value, model) {
    ....
    var someValue = model.get('someField')
    ....
}
Advertisements

Making custom model validations in extjs4.

Adding a custom validation to the Ext.data.validations is quite simple.

The are a few validations already, but not one that validates, that a number value lies within a minimum and maximum. I will call the new validation for range

Ext.data.validations is a singleton and the new range validation is installed by adding an error message and a validation function:

Ext.data.validations.rangeMessage = 'Value must be between {0} and {1}' ;

Ext.data.validations.range = function(config, value) {
   if (value === undefined) {
      return false;
   }
   var min = config.min,
   max = config.max;
   if ((value < min) || (value > max)) {
      config.message = Ext.String.format(this.rangeMessage, min, max);
      return false;
   } else {
      return true;
   }
}

The validation is configured like this in the validations of the model:

{
   field: 'price',
   type: 'range',
   min: 5,
   max: 100
}

This is also the config parameter of the validation function and the value parameter is the value of the field. So we have a pricfield where the number has to be between 5 and 100.

This range validation is a bit more complicated than the other validations, because it has an error message with parameters and it is calculated in the validation function. The calculated message is stored in config.message. When the model is validated the model.validate() method first checks for a config.message, then for Ext.data.validations.rangeMessage.