Как проверить, что форма действительна или нет?

Question

Есть ли способ узнать, что форма действительна или нет в реагирующем + материальном интерфейсе. Я использую реактивный материал в моей демонстрации. У меня есть три поля в моей форме, все они обязательны. Я хочу проверить submit кнопку, что форма действительна или нет

Вот мой код https://codesandbox.io/s/w7w68vpjj7

Я не хочу использовать плагин

submitButtonHandler = () => {
    console.log("error");
    console.log(this.state.form);
  };

  render() {
    const { classes } = this.props,
      { form } = this.state;
    return (
      <div className={classes.searchUser__block}>
        <SearchForm
          handleInput={this.handleInputFieldChange}
          submitClick={this.submitButtonHandler}
          form={form}
        />
      </div>
    );
  }

Answer 1

Привет, радость! Я сделал желаемую проверку формы, если обязательные поля пусты.

Вот обновленные коды и окна: https://codesandbox.io/s/50kpk7ovz4

Answer 2

Проверка формы может быть довольно сложной, поэтому я уверен, что вы в конечном итоге будете использовать библиотеку. На данный момент, чтобы ответить на ваш вопрос, нам нужно подумать о порядке отправки формы. Вот простой пример:

1. "Pre-отправить"
   • Установите isSubmitting в true
   • Перейдите к «Проверка»

2. "Проверка"

   • Запустить все проверки на уровне поля, используя validationRules
   • Есть ли ошибки?
     1. Да: отменить отправку. Установите ошибки, установите isSubmitting на false
     2. Нет: перейдите к «представлению»

3. "Представление"

   • Продолжите запуск обработчика отправки (т. Е. onSubmit или handleSubmit)
   • Установите isSubmitting в false

И минимальная реализация будет выглядеть примерно так:

// ...imports
import validateForm from "../helpers/validateForm";
import styles from "./styles";
import validationRules from "./validationRules";

const propTypes = {
  onSubmit: PropTypes.func.isRequired,
  onSubmitError: PropTypes.func.isRequired,
  initialValues: PropTypes.shape({
    searchValue: PropTypes.string,
    circle: PropTypes.string,
    searchCriteria: PropTypes.string
  })
};

const defaultProps = {
  initialValues: {}
};

class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.validateForm = validateForm.bind(this);
    this.state = {
      isSubmitting: false,
      values: {
        searchValue: props.initialValues.searchValue || "",
        circle: props.initialValues.circle || "",
        searchCriteria: props.initialValues.searchCriteria || ""
      },
      ...this.initialErrorState
    };
  }

  get hasErrors() {
    return !!(
      this.state.searchValueError ||
      this.state.circleError ||
      this.state.searchCriteriaError
    );
  }

  get initialErrorState() {
    return {
      searchValueError: null,
      circleError: null,
      searchCriteriaError: null
    };
  }

  handleBeforeSubmit = () => {
    this.validate(this.onValidationSuccess);
  };

  validate = (onSuccess = () => {}) => {
    this.clearErrors();
    this.validateForm(validationRules)
      .then(onSuccess)
      .catch(this.onValidationError);
  };

  onValidationSuccess = () => {
    this.setState({ isSubmitting: true });
    this.props
      .onSubmit(this.state.values)
      .catch(this.props.onSubmitError)
      .finally(() => this.setState({ isSubmitting: false }));
  };

  onValidationError = errors => {
    this.setState({ ...errors });
  };

  clearErrors = () => {
    this.setState({ ...this.initialErrorState });
  };

  updateFormValue = fieldName => event => {
    this.setState(
      {
        values: { ...this.state.values, [fieldName]: event.target.value }
      },
      () => this.validate()
    );
  };

  render() {
    // ...
  }
}

SearchForm.propTypes = propTypes;
SearchForm.defaultProps = defaultProps;

export default withStyles(styles)(SearchForm);

Как вы можете видеть, если поток отправки будет увеличиваться (например, касаться входных данных, ошибок передачи и т. Д.), Степень сложности внутри компонента также значительно возрастет. Вот почему предпочтительнее использовать хорошо поддерживаемую библиотеку. Formik - это мое личное предпочтение на данный момент.

Не стесняйтесь проверять обновленные коды и коробки . Надеюсь, это поможет.

Answer 3

Вы должны будете выполнить эту проверку вручную, если не хотите использовать какую-либо библиотеку. Material-ui не имеет встроенной проверки согласно их документации. НО это дает вам некоторые инструменты для этого, например, errorMessage для текстовых полей. Надо просто поиграть с ним

Пример:

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

немного устаревший пример, который у меня был