Validations

The Form provides a few basic validation rules by default. You can add custom rules to validate your fields. Please refer to the custom validation rules for more details. Here is how to add validation rules to a field:

<Input validate='email|required|maxLength-50' />

Note that you can add only Form provided rules this way. And all rules are pipe(|) operated separated.

Here is the list of rules provided by Form:

• email: this is to validate the email.
• required: this is to make sure that the user enters some value to the field.
• numeric: only numeric values.
• alphaNumeric: no special characters.
• alphabetic: only alphabets.
• maxLength: validate the input value maximum length. Here is an example:

<Input validate='required|maxLength-50' />

• minLength: validate the input value minimum length. Here is an example:

<Input validate='required|minLength-5' />

Please create an issue(or a PR) if you want to add more rules.

How to add custom validation rules?

You can add custom validation rules to your field. Pass customRules prop to the field. It accepts an object and can have as many rules as you want. Here is an example:

const newRule = {
  visaValidation : {
    rule : () => /^(?:4[0-9]{12}(?:[0-9]{3})?)$/,
    formatter(fieldName){
      return `${fieldName} is not a valid visa card number.`
    }
  }
}

This example has a custom rule to validate Visa credit cards. Here are the object properties details:

rule: The rule is a callback function. It usually returns a regular expression. That, in turn, is called by Form to validate the input value. If your rule has more complex logic, please return an object through the function that has property test in it. test of course is a function and returns a Boolean value as a result whether the input value is valid. In short, you are mimicking the regex's test function.

formatter: formatter is used to generate the validation error messages. Form passes field data from the fromData.field[id]. You can use all sorts of field details to format the error message.