Pup

v2.x

ComponentsValidation

The <Validation /> component in Pup is a helper component that utilizes the jQuery Validation library behind the scenes. It exists to handle issues with attaching the validation to a form at render time (in the past, a hack using a JavaScript setTimeout() was required which led to inconsistent form validation).

In order to use the component, import it into the component where you're adding a form and wrap it around the <form> tag. Next, pass your configuration for validation as props. All props are passed directly to jQuery Validation, so you can assume that all properties supported by the library are supported as props on the <Validation /> component.

On the right, we're displaying a simple usage example of the <Validation /> component from the /recover-password page in Pup.

/ui/pages/RecoverPassword/index.js
import React from 'react';
import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Accounts } from 'meteor/accounts-base';
import { Bert } from 'meteor/themeteorchef:bert';
import Validation from '../../components/Validation';
import AccountPageFooter from '../../components/AccountPageFooter';
import StyledRecoverPassword from './styles';

class RecoverPassword extends React.Component {
  handleSubmit = (form) => {
    const { history } = this.props;
    const email = form.emailAddress.value;

    Accounts.forgotPassword({ email }, (error) => {
      if (error) {
        Bert.alert(error.reason, 'danger');
      } else {
        Bert.alert(`Check ${email} for a reset link!`, 'success');
        history.push('/login');
      }
    });
  };

  render() {
    return (
      <StyledRecoverPassword>
        <Row>
          <Col xs={12}>
            <h4 className="page-header">Recover Password</h4>
            <Alert bsStyle="info">
              Enter your email address below to receive a link to reset your password.
            </Alert>
            <Validation
              rules={{
                emailAddress: {
                  required: true,
                  email: true,
                },
              }}
              messages={{
                emailAddress: {
                  required: 'Need an email address here.',
                  email: 'Is this email address correct?',
                },
              }}
              submitHandler={(form) => {
                this.handleSubmit(form);
              }}
            >
              <form ref={(form) => (this.form = form)} onSubmit={(event) => event.preventDefault()}>
                <FormGroup>
                  <ControlLabel>Email Address</ControlLabel>
                  <input
                    type="email"
                    name="emailAddress"
                    className="form-control"
                    placeholder="Email Address"
                  />
                </FormGroup>
                <Button type="submit" bsStyle="success" block>
                  Recover Password
                </Button>
                <AccountPageFooter>
                  <p>
                    Remember your password? <Link to="/login">Log In</Link>.
                  </p>
                </AccountPageFooter>
              </form>
            </Validation>
          </Col>
        </Row>
      </StyledRecoverPassword>
    );
  }
}

RecoverPassword.propTypes = {
  history: PropTypes.object.isRequired,
};

export default RecoverPassword;