Validation

FancyForm and FancyGrid have the same flexible validation.
There are built-in validation types, way to do self validation types over RegExp and handlers.
Built-in types: 'email', 'range', 'min', 'max', 'notnan', 'notempty'
Some types can be used as string value, another requires additional params.

Examples

Email vtype


},{
  name: 'email',
  label: 'Email',
  vtype: 'email'
},{
Range vtype

},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'range',
    min: 20,
    max: 70
  }
}]
Min vtype

},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'min',
    param: 30
  }
}]
Max vtype

},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'max',
    param: 70
  }
}]
NotNaN vtype

},{
  name: 'name',
  label: 'Name',
  type: 'string',
  vtype: 'notnan'
}]

To do self vtype it needs to use Fancy.addValid

There are 2 approaches on checking validation: over RegExp and over function.

Function


Fancy.addValid('notnan', {
  text: 'Must be numeric',
  fn: function(value){
    return !isNaN(value);
  }
});

RegExp


Fancy.addValid('email', {
  re: /^(")?(?:[^\."])(?:(?:[\.])?(?:[\w\-!#$%&'*+\/=?\^_`{|}~]))*\1@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
  text: 'Is not a valid email address'
});

Params

To use params inside of function, it requires to define them.

They will be avaliable inside of function over this


Fancy.addValid('range', {
  before: ['notempty', 'notnan'],
  text: 'Must be between {min} and {max}',
  fn: function(value){
    return value >= this.min && value <= this.max;
  }
});
...
columns: [{
  index: 'age',
  title: 'Age',
  width: 50,
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'range',
    min: 20,
    max: 70
  }

To do complex validation, it requires to add property before with list of queue of vtypes.


},{
  index: 'age',
  title: 'Age',
  width: 50,
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'max',
    param: 70
  }
}]