Как показать ошибку только при касании поля?|Реагировать && Formik - PullRequest
Новая
       7

Как показать ошибку только при касании поля?|Реагировать && Formik

0 голосов
/ 06 февраля 2019

У меня есть форма, созданная с помощью React и Formik.Все работает просто отлично, кроме одного крайнего случая.Мне нужно скрыть сообщение об ошибке (About wrong email address) для ввода электронной почты, если оно не было затронуто, поскольку оно не требуется.

ПРОБЛЕМА: Требуется электронная почта пользователя, даже если онаэто совершенно не связанная ошибка.

Я попытался установить поле касания внутри условного рендеринга, поэтому ошибка появляется только при касании поля.Как показано ниже: 

const emailValidation = (value, field) => {
  let emailErrorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) && field.email.touched) {
    emailErrorMessage = 'Invalid email address';
  }
  return emailErrorMessage;
};

Это не работает.Я коснулся его также в части кода JSX.See below: 

const createUserValidationSchema = Yup.object().shape({
  username: Yup.string('Provide a Username').required('Username is Required'),
  email: Yup.string('Provide an email'),
  password: Yup.string('Enter your password').required('Password is Required'),
  confirmPassword: Yup.string('Enter your password again')
    .required('Password Confirmation is Required')
    .oneOf([Yup.ref('password')], 'Passwords do not match')
});

const emailValidation = (value, field) => {
  let emailErrorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) && field.email.touched) {
    emailErrorMessage = 'Invalid email address';
  }
  return emailErrorMessage;
};

class userValidation extends Component {
  static propTypes = {
    ...formPropTypes,
    username: PropTypes.string,
    email: PropTypes.string,
    password: PropTypes.string,
    confirmPassword: PropTypes.string,
    groupSelect: PropTypes.func
  };

  static defaultProps = {
    email: ''
  };

  state = {
    type: 'password',
  };

 render() {
    const { type } = this.state;
    return (
      <div className="col-8">
        <h3>Create User</h3>
        <Formik
          initialValues={{
            username: '',
            email: '',
            password: '',
            confirmPassword: ''
          }}
          validationSchema={createUserValidationSchema}
          onSubmit={values => {
            // same shape as initial values
            console.log(values);
          }}
        >
          {({ errors, touched }) => (
            <Form>
              <div className="my-3">
                <label>
                  Username <span className="text-danger">*</span>
                </label>
                <Field name="username" type="text" className="form-control rounded-0" />
                {errors.username && touched.username ? (
                  <div className="text-danger">{errors.username}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>email</label>
                <Field
                  name="email"
                  validate={emailValidation}
                  type="email"
                  className="form-control rounded-0"
                />
                {errors.email && touched.email ? (
                  <div className="text-danger">{errors.email}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>
                  Password <span className="text-danger">*</span>
                </label>
                <div className="d-flex align-items-center">
                  <Field type={type} name="password" className="form-control rounded-0 mr-2" />
                  <span
                    className={type === 'password' ? 'fa fa-eye fa-lg' : 'fa fa-eye-slash fa-lg'}
                    onClick={this.togglePasswordMask}
                  />
                </div>
                {errors.password && touched.password ? (
                  <div className="text-danger">{errors.password}</div>
                ) : null}
              </div>
              <div className="my-3">
                <label>
                  Confirm Password <span className="text-danger">*</span>
                </label>
                <Field name="confirmPassword" type={type} className="form-control rounded-0" />
                {errors.confirmPassword && touched.confirmPassword ? (
                  <div className="text-danger">{errors.confirmPassword}</div>
                ) : null}
              </div>
              <button type="submit" className="btn btn-primary rounded-0 float-right my-3">
                Create User
              </button>
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default userValidation;

Ожидаемые результаты: Показывать адрес Invalid Email только при касании поля.Если я пытаюсь отправить, но не указал адрес электронной почты, ошибка не должна появиться.

Текущие результаты: Появляется ошибка, и я не могу отправить.

1 Ответ

0 голосов
/ 06 февраля 2019

Вы можете сделать это только с yup.Вам не нужна дополнительная пользовательская проверка 

const createUserValidationSchema = Yup.object().shape({
  email: Yup.string().email('Provide an email'),
  ....
});

Да, подтвердите ее, когда письмо заполнено, и разрешите отправить форму с пустым полем электронной почты

...