Neoclassic Placebo Maker

    simple-form-validation

    0.1.23 • Public • Published

    GitHub last commit npm Travis

    Simple Form Validation

    An easy-to-use react-native form validation highly customizable.

    With this module you can render an error message and prevent form submission with invalid data.

    How to use

    Installation

    npm install simple-form-validation --save
    

    Basic usage

    import SimpleFormValidation from 'simple-form-validation';
    
    class SFVTestComponent extends Component {
      constructor(props){
        super(props);
        
        this.SFV = new SimpleFormValidation(sfvOptions);
        this.SFV.field('email').email().required('Required').valid('Invalid e-mail');
      }
      state = {
        email: ''
      }
      onButtonPress() {
        if( this.SFV.validateSync() ) {
            alert('OK, no errors found');
        } else {
            alert('There are errors');
        }
        // You can pass the values here too...
        // this.SFV.validateSync(this.state);
        // The same as .setValues() before .validate()
      }
      render() {
        
        this.SFV.setValues(this.state);
        // OR - this.SFV.field('email').setValue(this.state.email);
        return (
          <View>
            <Text>Enter you e-mail</Text>
            <TextInput onChangeText={email=>this.setState({email})}/>
            <Button onPress={()=>{this.onButtonPress()}}>
                <Text>Press me</Text>
            <Button>
            {this.SFV.renderError('email')}
          </View>
          <View>
            E-mail has error? { this.SFV.field('email').hasError()
                                  ? 'Yes...'
                                  : 'No, all good'}
          </View>
        );
      }
    }
    

    How to ...

    ... check if a number is greater than 5

    this.sfv.field('myNumericField').numeric().min(6, 'The number should be >5.');
    

    ... check if an email is valid

    this.sfv.field('emailField').email().valid('The address you provided is invalid.');
    

    ... check if the name was provided

    this.sfv.field('nameField').text().required('Name is required.')
    

    ... check if a the value matches the regex

    this.sfv.field('password').text().regex(/^(asdf)$/, 'You password is too weak.')
    

    ... check if a specific field has error

    This is useful to style the field with error

    this.sfv.field('password').hasError(); // return true/false
    

    See validators.

    Advanced use

    Options

    // This are the default options, you don't need to pass it, 
    // but you can change if you want.
    const sfvOptions  = {
      justRenderAfterValidate:  true,
      defaultMessage:  '',
      displayErrorCallback:  text  => {
        return  text;
      }
    };
    this.sfv = new SimpleFormValidation(sfvOptions);
    
    Option Description Default
    justRenderAfterValidate If false, will render errors as soon as form is shown. If true it will wait until you call .validate() or .validateSync() for the first time. true
    defaultMessage This message will be passed over validators if you do not provide an default message to the validator empty
    displayErrorCallback This callback is called on .renderError() text=>{return text;}

    Rendering errors

    displayErrorCallback allows you to define you own custom renderer.

    Important! If a field has error, but no message was set, a warning will be generated before it's rendered. It will call the renderer callback anyway.

    {
        displayErrorCallback: text => {
            return <Text style={{color: '#d00'}}>{text}</Text>
        }
    }
    

    Sync validation vs Promise Validation

    There's no big difference. Internally, .validate() calls .validateSync().

    if ( SFV.validateSync({field: 'value'}) ){
        // all good
    } else {
        // one or more things are wrong...
        // SFV.errors hold the list of errors
    }
    
    // - OR
    
    SFV.validate({field:'value'}).then(()=>{
        // all good
    }).catch(errors => {
        // one or more things are wrong...
        // errors hold the list of errors
    });
    

    Custom validators

    You can define your own custom validator, to meet your requirements.

    class IsNumberOneValidator extends Validator {
      isNumberOne(message){
        this.addStep(
          'isNumberOne',         // rule name
          v => return v === 1,   // rule callback
          message                // error message
        );
      }
    }
    /* *** */
    SFV.field('AmINumberOne')
      .custom(new IsNumberOneValidator())
      .isNumberOne('You shall not pass!');
    /* *** */
    SFV.renderError('AmINumberOne', 1); //return null
    SFV.renderError('AmINumberOne', 2); //return "You shall not pass!"
    

    Reset

    You can reset the SFV, if you want.

    SFV.reset(); // cleans all fields, rules and errors
    

    Cheat Sheet

    Validators

    Messages from rules are always optional.

    ValidatorNumeric

    SFV.field('fieldName')
      .numeric(defaultMessage)
      .min(minValue, message)
      .max(maxValue, message)
    

    ValidatorText

    Internally, .regex() uses regex.test(v).

    SFV.field('fieldName')
      .text(defaultMessage)
      .minLength(minLength, message)
      .maxLength(maxLength, message)
      .regex(regex, message);
    

    ValidatorEmail

    ValidatorEmail use the following regex to check if an e-mail is valid or not.

    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

    SFV.field('fieldName')
      .email(defaultMessage)
       // const domains = "@hotmail.com" 
       // const domains = "@hotmail.com,@gmail.com"
       // const domains = ['@hotmail.com','@gmail.com']
      .notFrom(domains)
      //.onlyFrom(domains)
      .valid(message);
    

    ValidatorDate

    SFV.field('fieldName')
      .date(dateFormat, defaultMessage)
      .valid(message)
      .minAge(age, message)
      .maxAge(age, message)
    

    ValidatorCPF

    SFV.field('fieldName')
      .cpf(defaultMessage)
      .valid(message);
    

    Custom Validator

    See custom validators.

    Contributing

    Please create issues and suggest PRs.

    Third-party Components

    moment.js

    Install

    npm i simple-form-validation

    DownloadsWeekly Downloads

    25

    Version

    0.1.23

    License

    ISC

    Unpacked Size

    34.6 kB

    Total Files

    24

    Last publish

    Collaborators

    • lcssanches