Nocturnal Prancing Mosquito

    react-validatus

    0.1.1 • Public • Published

    react-validatus

    A simple to use and light-weight React validator component.


    The problem

    You need to apply multiple validators on form inputs - and not only - and declaratively render a UI using these rules, by applying CSS classes, displaying custom error messages, etc.

    The solution

    react-validatus is a simple and light-weight React Component that lets you apply as many validators you need and render your desired UI (by taking advantage of React's render props pattern). It's a wrapper of the excellent validator.js that does the heavy lifting of the validations.

    Installation

    npm install --save react-validatus
    

    Usage

    The Validatus component requires 2 props in order to work. The first one is the value that you want to validate, which MUST be of type string. The second one are the validators you want to apply for the previous value. The validators MUST be an array of strings and / or objects. You can view all the validators (names, options, etc.) at the official documentation of validator.js. Each validator will validate the value prop. With this in mind you can use any of the available validators simply by passing their names as strings (ex. "isEmail"). If you need to pass options to a validator you need to pass an object with the name of the validator as key and its options as the value (ex. { isLength: { min:3, max: 10} }).

    Finally, you can render your UI of choice by passing a render function as children to the Validatus component. The specific function provides as argument an object with 2 keys. The first one is the isValid key that its type of boolean and is true only if ALL validators are passing (in any other case is false). The second object key validations, is an object with key names the names of the applied validators and values a boolean for their status (ex. validations: { isEmail: true, isLength: false}). If an individual validator is passing, the boolean value will be true otherwise will be false.

    Example:

    At the below example the value email will be validated with the following validators: isRequired, isEmail, contains and isLength (read more information about the available validators). As you can see the last 2 validators have options. The isValid key will be true ONLY if all validators return true. You can also get individually every validation result from the validations object.

    For more examples please check the examples directory.

    import Validatus from "react-validatus";
     
    <Validatus value="john@gmail.com" validators={["isRequired", "isEmail", { contains: "@gmail" }, { isLength: { min:3, max: 15} }]}>
      {
        ({ isValid, validations }) =>
          <div className="form-group">
            <label htmlFor="email">Email address</label>
            <input
              id="email"
              type="text"
              name="email"
              value={email}
              onChange={this.updateInput}
              className={`form-control ${!isValid && "is-invalid"}`}
              placeholder="Enter email"
            />
            { !validations.isRequired && <div className="invalid-feedback">Field is required</div> }
            { !validations.isEmail && <div className="invalid-feedback">Field must be a valid email</div> }
            { !validations.contains && <div className="invalid-feedback">Field must contain &quot;@gmail&quot;</div> }
            { !validations.isLength && <div className="invalid-feedback">Length must be between 3 and 15</div> }
          </div>
      }
    </Validatus>

    FAQ

    I want more examples.

    Sure, have a look into the examples directory.

    Where can I view ALL the available validators with the otpions / documentation?

    Here you can view all the available validators and their the otpions / documentation. Keep in mind that you can use only the validators, not the sanitizers.

    Contributing

    Feel free to contribute (see below how you can build, lint and test the package).

    Setting up the development enviroment

    You need to have node.js installed (any recent node / npm version will do). When you are ready, you can install all dependencies and run the webpack dev server by typing the below commands:

    npm install
    npm start
    open http://localhost:3000
    

    Feel free to change the port from package.json.

    Lint files

    Lint all js files:

    npm run lint
    

    Auto-fix linting issues:

    npm run lint:fix
    

    Run tests

    Run all test by typing:

    npm test
    

    License

    MIT

    Authors

    Known Issues / TODO

    • isMobilePhone cannot accept the third argument (currently the Component supports only validators with maximum arity of 2).

    Acknowledgments

    Install

    npm i react-validatus

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    64.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • tsevdos