react-validation-aluha

react-validate, react-validation

Install

npm install --save react-validation-aluha

Usage

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Form, Input, Select, Select2, required } from 'react-validation-aluha';

class Example extends Component {

async handleSubmit(event) {
    event.preventDefault();
    const res = this.form.validateAll();
    if (res) {
      console.log('submited');
    }

  render () {
    return (
      <Form
            noValidate
            ref={c => {
              this.form = c;
            }}
            onSubmit={this.handleSubmit.bind(this)}
          >
            <ModalBody>
              <div className="row">
                <div className="form-group col-6">
                  <label className="req">Name</label>
                  <Input
                    type="text"
                    className="form-control"
                    validations={[required]}
                  />
                </div>

                <div className="form-group col-6">
                  <label className="req">Imei</label>
                  <Select2
                    data={this.state.data ? this.state.data : []}
                    display="name"
                    options={{
                      placeholder: '-- name --',
                    }}
                    validations={[required]}
                    onSelect={event => {
                      this.selectImei(event);
                    }}
                  />
                </div>
              </div>
            </ModalBody>
            <ModalFooter>
              <Button color="primary" type="submit">
                <i className="far fa-save mr5" />
                Save
              </Button>
              <Button color="secondary" onClick={this.open}>
                <i className="fas fa-times mr5" />
                Cancel
              </Button>
            </ModalFooter>
          </Form>
    )
  }
}

License

Features

• required
• email
• isnumber
• min
• max
• minLength
• maxLength
• password

Form

• Form
• Input
• Select
• Select2
• Textarea
• Button

CSS validator

.invalid-input {
    border-left: red solid 3px;
    /* background: #b760602e; */
}
.state-error {
    color: #ed1c24;
    margin: 5px 0 0 0;
    display: block;
    font-size: 13px;
    text-align: left;
}
.req {
    font-weight: bold;
}

.req:after {
    color: #e32;
    content: ' *';
    display: inline;
}

MIT © [email protected]