React Form Validation

This Library allows validating React Forms easily with a collection of helpers and components.

Helpers: allow validating simple form (with no component or another component framework )

• Validators:
  • required
  • minlength (by default 3 characters)
  • maxlength (by default 30 characters)
  • email
  • pattern (with a regular expression)
  • custom (with a function)
  • ( + isNullOrEmpty )
• ValidationHelper allows validating a value, a property or a form model
  • validateValue
  • validateProperty
  • validateAll
  • ( + hasErrors, countErrors )
• DOMFormHelper allows resolving element value
  • getElementValue: returns the value of a form element (input, select, radio, etc.)
• Util:
  • omit
  • clone
  • extend

Components: allow to bind value and notify on value change (onValueChange) and on touch / blur (onTouch)

• Input
• Password (allows showing password)
• Checkbox
• CheckboxGroup
• Radio
• RadioGroup
• Select (multiple supported)
• TextArea
• LightGroup (allows showing error)
• FormGroup (allows showing error and success)
• Form
• Label (asterisk for required field)
• FontIcon (Icon with Font Awesome) + EyeIcon
• ErrorBlock
• Submit (could be disabled with errors)
• Reset (allows resetting to initial state)

Installation

npm i romagny13-react-form-validation -S

Requires Font Awesome. With a CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

... Or with Webpack (+ css-loader):

npm i font-awesome -S

Documentation

• Site

Examples

To run examples npm i then npm run dev