valium

A Form validator for React, using and customizing HTML5 Constraint Validation API.

Table of Contents

1. Demo
2. HTML5 Constraint Validation API?
3. Premature Validation?
4. Install
5. Getting started
6. Docs

Demo

Check a live demo at valium.afialapis.com

HTML5 Constraint Validation API?

Yes: instead of providing lots of verbose-methods-you-must-learn to validate your inputs, Valium will just:

• let you render your input elements completely as you need
• check validation constraints in those inputs (required, minLength, maxLength, pattern, ...)
• provide you the validation status so you can render them in consequence

Even more: Valium extends these constraints:

• it accepts some custom constraints (allowedValues or disallowedValues lists, doRepeat or doNotRepeat other form's fields, or even a custom checkValue callback)
• checks these custom constraints and updates accordingly the element's ValidityState

Premature Validation?

HTML5 Constraint Validation API checks for validity changes when the input changes. Depending on the browser, it means: when the input loses the focus.

Valium is here to make your Forms much nicer: with prematureValidation, the ValidityState is updated while typing!

Install

  npm i valium

Getting started

Valium provides just two elements: VForm and VInput.

VForm will be the parent element. It just renders a form element, and provide a couple of render props (renderInputs and renderButtons) so you can render the rest.

Then, any input inside the Form that you want to be validated, must be wrapped within a VInput element.

Basic example

Let's check a basic example (try it at CodePen):

import React, {useState} from 'react';
import {VForm, VInput} from 'valium'

const MyValidatedForm = () => {

  const [myText, setMyText]= React.useState('')
  
  return (
      <VForm 
        renderButtons= {(valid, elements) => null}

         renderInputs= {(formActions) => 
           <VInput
              type                 = "text"
              /* formActions must be passed to every VInput */
              formActions          = {formActions}
              /* Valium provides some custom constraints */
              disallowedValues     = {["NO"]}
              /* prematureValidation will not wait input to lose focus */
              prematureValidation  = {true}
              render = {(valid, message, inputRef) => 
                <div>
                  <input ref       = {inputRef}
                         name      = 'myText'
                         className = {valid ? 'valid' : 'invalid'}
                         value     = {myText}
                         onChange  = {(event) => setMyText(event.target.value)}
                         /* HTML Validation constraints are managed directly on HTML input elements*/
                         required  = {true}
                         minLength = {2}
                         maxLength = {50}
                  />
                  <div className="valium-example-input-feedback">
                    {message}
                  </div>
                </div>
              }
            /> 
          }
      />
  )
} 

Docs

For complete docs, check valium.afialapis.com