DigitalRiver / react-atlas

Composable React components with CSS Modules.
http://digitalriver.github.io/react-atlas/
MIT License
38 stars 25 forks source link

Form: Standardize validation methods across input components #928

Open Darper opened 5 years ago

Darper commented 5 years ago

In order to properly have a Form component that can validate Atlas input components (TextField, TextArea, Dropdown, etc.) they need to all have one method that can be called that will both validate the value and update state for value and messaging.

Currently, TextField has a _validate() method that (I think) does what we need.

_validate = (event, inputValue, change) => {
  const validationObject = utils.validate(
    inputValue,
    this.props.valid,
    this.props.status,
    this.props.message,
    this.props.required,
    event
  );

  this.setState(
    {
      "status": validationObject.status,
      "message": validationObject.message,
      "value": inputValue,
      "active": change
    },
    () => {
      this._eventHandlers(event, change);
    }
  );
};

There are two main issues that need to be solved.

  1. The event is not available when being called from an parent component via a ref.
  2. Other input components do not have a central method like this that can be called to both validate and set state properly.

This will block applications from being able to use our component validation inside a form.