Menu

Custom validations behavior

The custom validations behavior object

In customValidationsConfig, you can set up the behavior some validations.

customValidationsConfig: {
  pattern: '[0-9]', // or by html attribute 'data-pattern'
  flags: 'g', // or by html attribute 'data-flags'
  maxLength: 5, // or by html attribute 'data-max-length'
  minLength: 5, // or by html attribute 'data-min-length'
  sameLength: 5, // or by html attribute 'data-same-length'
  rangeLength: {
    min: 3, // or by html attribute 'data-max-length'
    max: 5 // or by html attribute 'data-min-length'
  },
  max: 5, // or by html attribute 'data-max'
  min: 3, // or by html attribute 'data-min'
  range: {
    max: 5, // or by html attribute 'data-max'
    min: 3 // or by html attribute 'data-min'
  },
  equalTo: 10, // or by html attribute 'data-equal-to'
  extensions: ['jpg', 'png'] // or by html attribute 'data-extensions'
}

Html attributes

You also can do that by html attributes. Html attributes are indicated for cases more specifics.

Examples:

<form>
  <div>
    <input type="text" class="pattern" data-pattern="[a-z]" data-flags="ig">
  </div>
  <div>
    <input type="text" class="max-length" data-max-length="7">
  </div>
  <div>
    <input type="file" class="has-extension" data-extensions="svg,png">
  </div>
  <div>
    <input type="text" class="range-length" data-min-length="2" data-max-length="3">
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>
Key Type Default Description
pattern string [0-9]

Used to pass a custom regular expression to be used by pattern validator. Its matching html attribute is data-pattern.
flags string g

Used to pass a custom flag to regular expression given by customValidationsConfig.pattern. Its matching html attribute is data-flags.
maxLength integer 5

Used to pass a custom max length limit to be used by maxLength validator. Its matching html atribute is data-max-length.
minLength integer 5

Used to pass a custom min length limit to be used by minLength validator. Its matching html atribute is data-min-length.
sameLength integer 5

Used to pass a custom value to be used by sameLength validator. Its matching html attribute is data-same-length.
rangeLength Object {min: 3, max: 5}

Used to pass custom values to be used by rangeLength validator. This object must have a key min and a key max, both receving a integer value. Its matching html attributes are data-min-length and data-max-length.
max integer 5

Used to pass a custom max value to be used by max validator. Its matching html atribute is data-max.
min integer 3

Used to pass a custom min value to be used by min validator. Its matching html atribute is data-min.
range Object {min: 3, max: 5}

Used to pass custom values to be used by range validator. This object must have a key min and a key max, both receving a integer value. Its matching html attributes are data-min and data-max.
equalTo integer 10

Used to pass a custom value to be used by equalTo validator. Its matching html attribute is data-equal-to.
extensions Array ['jpg', 'png']

Used to pass an array of strings with valid extensions to be used by hasExtension validator. Its matching html attribute is data-extensions. In html attribute you must pass the valid extensions without spaces and separated by commas.