React-Toolbox dialog form with required field

Question

is there a way to use required Input-Fields in react-toolbox componenets dialog?

there you can define actions: I want to define on action as a submit or prevent default action that checks if in the form the html5 required fields are filled

http://react-toolbox.com/#/components/dialog

Answer 1

This is how I'm doing the validation in react-toolbox.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      active: false, // for Dialog open/close
      errors: {}
    };
    this.updateState = this.updateState.bind(this);
    this.validateFormField = this.validateFormField.bind(this);
  }

  updateState(value, e) {
    this.setState({
      [e.target.name]: value
    });
  }

  validateFormField(e) {
    const propName = e.target.name;
    const value = e.target.value;
    const errors = { ...this.state.errors };

    errors[propName] = '';
    switch (propName) {
      case 'username':
        if (value === '') {
          errors[propName] = 'Username required';
        }
        // add other checks for username
        break;
      // add more for fields
      default:
    }

    this.setState({
      errors
    });
  }

  render() {
    const actions = [
      { label: 'Cancel', onClick: this.cancelAction },
      { label: 'Submit', onClick: this.submitForm }
    ];
    return (
      <Dialog
        actions={actions}
        active={this.state.active}
      >
        <Input
          type="text"
          name="username"
          label="Username"
          onChange={this.updateState}
          value={this.state.username}
          onBlur={this.validateFormField}
          error={this.state.errors.username}
        />
      </Dialog>
    );
  }
}

Hope this helps.