Nougat Predominant Middleware

    atomic-form

    0.1.5 • Public • Published

    A complete component for building React Forms.

    Features

    • Atomic Forms integrates with Validator for quick validations.
    • Custom functions for validation, including validating against other form fields.
    • Validate/Gather form data as users inputs data.
    • Populate forms with initial data.
    • Use multiple validations on a single input.
    • Recieve and display multiple validation message errors.

    Video

    IMAGE ALT TEXT HERE

    Installation

    npm install atomic-form

    Then with a module bundler or webpack, use as you would anything else:

    // using an ES6 transpiler
    import AtomicForm from 'atomic-form';
    // not using an ES6 transpiler
    var AtomicForm = require('atomic-form');

    AtomicForm Props

    • doSubmit: A callback that will be used when all validations are successful. The callback will be invoked with a single parameter containing formData.
    • afterValidation: A callback that will be used when any validations fail. The callback will have a single parameter containing form validation errors/messages.
    • initialData: (Optional) An object that will be used to populate the form with initial data.
    • getState: (Optional) Allows for complete override of the getState method.
    • updateFormData: (Optional) Allows for complete override of the updateFormData method.
    • collectFormData: (Optional) Allows for complete override of the formData method.

    What's it look like?

    import AtomicForm from 'atomic-form';
    import UserAction from './actions/user';
     
    export default class RegisterForm extends React.createClass({
     
      constructor(props, context){
        super(props, context);
        this.state = this.getState();
      }
     
      getState() {
        //Optional - Set form initial data.
        return {
          initialData: {
            email: "test@example.com",
            password: "example",
            confirmPassword: "example"
          }
        }
      }
     
      afterValidation(formValidations) {
        //Callback after validation fails.
        this.setState({validations: formValidations});
      }
     
      doSubmit(formData) {
        //Callback after a user hits submit and the formdata is all valid.
        UserAction.register({
          User: {
            email: formData.email,
            password: formData.password
          }
        });
      }
     
      componentWillUnmount() {
        //Optional - We can get the formData from our form anytime.
        var formData = this.refs.MainForm.formData();
      }
     
      onInputChange() {
        //Optional - If we want to validate the form from an onChange callback.
        var formData = this.refs.MainForm.formData();
        var formValidations = this.refs.MainForm.validateForm(formData);
        this.setState(validations: formValidations);
      }
     
      validationMessage(field) {
        if (this.state.validations && this.state.validations[field]) {
          if (!this.state.validations[field].isValid) {
            return _.map(this.state.validations[field].message, (message) => {
              return <span>{message}</span>;
            });
          }
        }
        return <div/>;
      }
     
      render() {
        return <div>
          <AtomicForm ref="MainForm" initialData={this.state.initialData} doSubmit={this.doSubmit} afterValidation={this.afterValidation}>
            <div className="row">
              <input type="text" ref="email" validate={[
                {
                  message: "Must be a valid Email.",
                  validate: "isEmail",
                }
              ]} onChange={(e) => {this.onInputChange}}/>
              {this.validationMessage("email")}
              <input type="text" ref="password" validate={[
                {
                  message: "Password must be at least 5 characters long.",
                  validate: "isLength",
                  args: [5]
                }
              ]}/>
              {this.validationMessage("password")}
              <input type="text" ref="confirmPassword" validate={[
                {
                  message: "Passwords must match",
                  validate: (val, formData) => {val == formData.password},
                }
              ]}/>
              {this.validationMessage("confirmPassword")}
              <input type="submit" value="Submit"/>
            </div>
          </AtomicForm>
        </div>
      }
    });

    Dependencies

    • Lodash - npm install should take care of this.

    Contact Us

    Atomic Jolt Website

    Install

    npm i atomic-form

    DownloadsWeekly Downloads

    17

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • jbasdf