Availity reactstrap Validation

Installation

NPM

Install reactstrap and peer dependencies via NPM

npm install --save availity-reactstrap-validation react react-dom

ES6 - import the components you need

import React from 'react';
import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    const modalError = this.state.error ? 'not' : ''; // This is just for the modal
    return (
      <div>
        <AvForm onValidSubmit={this.handleValidSubmit} onInvalidSubmit={this.handleInvalidSubmit}>
          <AvField name="email" label="Email Address" type="email" required />
          <Button color="primary">Submit</Button>
        </AvForm>

        {/* below this is just for show, it's not needed unless you want a modal upon form submission */}
        <Modal isOpen={this.state.email !== false} toggle={this.closeModal}>
          <ModalHeader toggle={this.closeModal}>Form is {modalError} valid!</ModalHeader>
          <ModalBody>
            You have {modalError} successfully filled out the form and submitted it. Your email ({this.state.email}) is {modalError} valid!
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.closeModal}>Ok, got it!</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }

  constructor(props) {
    super(props);

    this.handleValidSubmit = this.handleValidSubmit.bind(this);
    this.handleInvalidSubmit = this.handleInvalidSubmit.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.state = {email: false};
  }

  handleValidSubmit(event, values) {
    this.setState({email: values.email});
  }

  handleInvalidSubmit(event, errors, values) {
    this.setState({email: values.email, error: true});
  }

  closeModal() {
    this.setState({email: false, error: false});
  }
}

About the Project

This library contains helper components that extend the form capabilities provided by reactstrap. The library does not depend on jQuery or Bootstrap javascript, only reactstrap.

Use the form and input components provided by this library directly instead of the ones provided by reactstrap. You can use the components provided by reactstrap in conjunction with the components this library provides without an problem, but validation will not work for those particular components.