Nocturnal Practitioners of Magic

    react-form-validator-core

    1.1.1 • Public • Published

    Validation component for react forms

    license npm version Build Status

    Simple form validation component for react forms inspired by formsy-react

    Default validation rules:

    • matchRegexp
    • isEmail
    • isEmpty
    • required
    • trim
    • isNumber
    • isFloat
    • isPositive
    • minNumber
    • maxNumber
    • minFloat
    • maxFloat
    • isString
    • minStringLength
    • maxStringLength
    • maxFileSize
    • allowedExtensions

    Some rules can accept extra parameter, example:

    <YourValidationInput
       {...someProps}
       validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}
    />

    Usage

    import React from 'react';
    import { ValidatorComponent } from 'react-form-validator-core';
    
    class TextValidator extends ValidatorComponent {
    
        render() {
            const { errorMessages, validators, requiredError, validatorListener, ...rest } = this.props;
    
            return (
                <div>
                    <input
                        {...rest}
                        ref={(r) => { this.input = r; }}
                    />
                    {this.errorText()}
                </div>
            );
        }
    
        errorText() {
            const { isValid } = this.state;
    
            if (isValid) {
                return null;
            }
    
            return (
                <div style={{ color: 'red' }}>
                    {this.getErrorMessage()}
                </div>
            );
        }
    }
    
    export default TextValidator;
    ...
    import { ValidatorForm } from 'react-form-validator-core';
    ...
    render() {
        return (
            <ValidatorForm
                ref="form"
                onSubmit={this.handleSubmit}
            >
                <TextValidator
                    onChange={this.handleChange}
                    name="email"
                    value={email}
                    validators={['required', 'isEmail']}
                    errorMessages={['this field is required', 'email is not valid']}
                />
                <button type="submit">submit</button>
            </ValidatorForm>
        );
    }
    ...
    class FileValidator extends ValidatorComponent {
      render() {
        const { errorMessages, validators, requiredError, validatorListener, value, ...rest } = this.props;
        return (
          <div>
            <input type="file" {...rest}>
            {this.errorText()}
          </div>
        );
      }
    
      errorText() {
        const { isValid } = this.state;
    
        if (isValid) {
          return null;
        }
    
        return <div style={{ color: "red" }}>{this.getErrorMessage()}</div>;
      }
    }
    export default FileValidator;
    
    ...
    import { ValidatorForm } from 'react-form-validator-core';
    ...
    render() {
        return (
            <ValidatorForm
                ref="form"
                onSubmit={this.handleSubmit}
            >
                <FileValidator
                    onChange={this.handleChange}
                    name="file"
                    type="file"
                    value={file}
                    validators={['isFile', 'maxFileSize:' + 1 * 1024 * 1024, 'allowedExtensions:image/png,image/jpeg']}
                    errorMessages={['File is not valid', 'Size must not exceed 1MB', 'Only png and jpeg']}
                />
                <button type="submit">submit</button>
            </ValidatorForm>
        );
    }
    ...

    You can add your own rules

    ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
        if (value !== this.state.user.password) {
            return false;
        }
        return true;
    });

    Get them

    ValidatorForm.getValidationRule('isPasswordMatch');

    Remove them

    ValidatorForm.removeValidationRule('isPasswordMatch');

    And check is validation rule already in list

    ValidatorForm.hasValidationRule('isPasswordMatch');

    Migration guide

    From 0.x to 1.x

    Breaking changes was introduced in order to avoid legacy context. You should change render method of your input components to renderValidatorComponent.

    Before:

    import React from 'react';
    import { ValidatorComponent } from 'react-form-validator-core';
    
    class TextValidator extends ValidatorComponent {
        render() {
            // return your validated component
        }
    }
    
    export default TextValidator;

    After:

    import React from 'react';
    import { ValidatorComponent } from 'react-form-validator-core';
    
    class TextValidator extends ValidatorComponent {
        renderValidatorComponent() {
            // return your validated component
        }
    }
    
    export default TextValidator;

    API

    ValidatorForm

    • Props
    Prop Required Type Default value Description
    onSubmit true function Callback for form that fires when all validations are passed
    instantValidate false bool true If true, form will be validated after each field change. If false, form will be validated only after clicking submit button.
    onError false function Callback for form that fires when some of validations are not passed. It will return array of elements which not valid.
    debounceTime false number 0 Debounce time for validation i.e. your validation will run after debounceTime ms when you stop changing your input
    • Instance methods (via ref)
    Name Params Return Description
    resetValidations Reset validation messages for all validated inputs
    isFormValid dryRun: bool (default true) Promise Get form validation state in a Promise (true if whole form is valid). Run with dryRun = false to show validation errors on form
    • Static methods (via class)
    Name Params Return Description
    addValidationRule name: string, callback: function Add new validation rule
    getValidationRule name: string function Get validation rule by name
    hasValidationRule name: string bool Check if rule exsits
    removeValidationRule name: string Remove validation rule

    All validated fields (ValidatorComponent)

    • Props
    Prop Required Type Default value Description
    validators false array Array of validators. See list of default validators above.
    errorMessages false array Array of error messages. Order of messages should be the same as validators prop.
    name true string Name of input
    validatorListener false function It triggers after each validation. It will return true or false
    withRequiredValidator false bool Allow to use required validator in any validation trigger, not only form submit
    containerProps false object Allow to customize input wrapper div
    • Methods
    Name Params Return Description
    getErrorMessage Get error validation message
    validate value: any, includeRequired: bool Run validation for current component
    isValid bool Return current validation state
    makeInvalid Set invalid validation state
    makeValid Set valid validation state

    Implementations

    Contributing

    This component covers all my needs, but feel free to contribute.

    Install

    npm i react-form-validator-core

    DownloadsWeekly Downloads

    24,701

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    37.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • newoldmax