Итак, в последней статье я объяснил, как создать простую форму с помощью Formik, в этой статье я хочу поговорить о том, как проверять с помощью Yup и отображать ошибки в вашей форме.
Пользовательская проверка
В коде последней статьи вы можете увидеть, как мы обычно проводим проверку:
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = "Required";
} if (!values.lastName) {
errors.lastName = "Required";
}
return errors;
};
<Formik
initialValues={formData}
validate={validate}
>
// put a form here
</Formik>
Основная идея состоит в том, что в Formik есть свойство validate. Мы можем передать ему метод проверки, который будет принимать values, вводимые пользователем, и проверять его с помощью ваших пользовательских методов. В конце будет возвращено errors, и его можно будет использовать для отображения errors сообщений.
Однако очень часто нам нужно использовать одну и ту же проверку для разных приложений. Например, если мы хотим проверить, что имя пользователя представлено в другом приложении, мы должны перейти в наше последнее приложение и скопировать туда коды или снова написать все это вручную. Это раздражает и очень подвержено ошибкам! Вот где Yup - удобный инструмент.
Да проверка
Схема
Ага, очень полезно, потому что включает в себя много общих проверок. Сначала мы можем установить его:
npm install yup
И затем импортируйте его в документ, который нам нужен для проверки, например:
import * as Yup from 'yup';
После этого мы можем свободно использовать все так:
Yup.<data type>.<built-in method>
Например, чтобы проверить, является ли строка допустимым форматом электронной почты, сделайте следующее:
email: Yup.string.email()
Это проверит поле email, чтобы убедиться, что это действительный адрес электронной почты.
Чтобы проверить весь объект, мы можем сделать это:
let schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
}),
});
Это означает, что schema - это метод проверки всего объекта, только когда все поля соответствуют всем требованиям, проверка будет пройдена.
ValidationSchema
Хорошо, а как использовать эту схему для проверки? На самом деле, Formik настолько любит Yup, что предлагает простой способ использовать этот schema: передать его в опору validationSchema в <Formik> следующим образом:
<Formik
initialValues={formData}
onSubmit={handleSubmit}
validationSchema={schema}
>
//Put the form here
</Formik>
Итак, прямо сейчас происходит волшебство! Formik будет использовать SignupSchema для проверки всех полей в форме. И если есть какие-либо недопустимые элементы, возвращенный объект errors будет содержать имя поля и сообщение, подобное этому:
name: "A name is required."
Я настроил это сообщение, передав его методу require в: Yup.string.required(“A name is required.”). Просто ознакомьтесь с документацией, чтобы узнать, как пройти специальный метод проверки.
Отображать сообщения об ошибках
Как получить доступ к сообщениям об ошибках
Как описано в прошлой статье, Formik - это просто компонент React. Следовательно, свойства могут передаваться и передаваться из компонента. Если мы хотим получить доступ к ошибкам, мы можем извлечь их из свойств, которые Formik предлагает своему дочернему компоненту следующим образом:
<Formik
initialValues={formData}
onSubmit={handleSubmit}
validationSchema={schema}
>
{({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleChange}
onBlur={handleBlur}
value={values.firstName}
name="firstName"
/>
{errors.firstName &&
<div>
{errors.firstName}
</div>}
<button type="submit">Submit</button>
</form>
)}
</Formik>
Как мы видим, дочерний компонент Formik здесь <form>. handleSubmit, handleChange, handleBlur, values, errors, touched, все переданы <form> компоненту для использования. Таким образом, мы можем получить доступ к errors, который возвращается методом проверки.
Отображать сообщения об ошибках условно
Теперь все выглядит намного лучше! Однако есть еще одна проблема:
errors.firstName &&
<div>
{errors.firstName}
</div>}
Исходя из этого, мы можем сказать, что условием отображения сообщения об ошибке является наличие errors.firstName. Это имеет смысл в случае, когда мы коснулись поля firstName, но ничего не написали - validation не будет работать, потому что это required. Но что делать, если в самом начале, при первой загрузке формы?
Он только что загружен, мы его еще не трогали, поэтому он пустой! И поскольку проверка загружается при загрузке формы, поэтому, если мы console.log ошибку сейчас, мы увидим, что errors.firstName истинно, что приведет к отображению красной ошибки в форме.
Но мы не этого хотим, верно? Мы хотим, чтобы оно отображалось только при касании и наличии ошибки, связанной с этим полем.
Для этого мы можем:
touched.firstName && errors.firstName ? <div>{errors.firstName} : null
В этом случае он будет отображать ошибку, только когда мы коснемся его, И когда возникнет ошибка.
Примечание
Еще одна важная вещь: если вы хотите использовать опору touched, убедитесь, что вы используете handleBlur в каждом поле ввода, которое вы будете использовать touched следующим образом:
{({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleChange}
onBlur={handleBlur} // IMPORTANT!!
value={values.firstName}
name="firstName"
/>
{errors.firstName &&
<div>
{errors.firstName}
</div>}
<button type="submit">Submit</button>
</form>
)}
Вот как он узнает, какое поле было затронуто.
КОНЕЦ
Спасибо за чтение! Теперь форма с проверкой и ошибками отображается правильно. На следующем шаге мы поговорим о том, как реализовать многоступенчатую форму. Оставайтесь на связи!
Ресурсы:
Используйте Formik + Yup, чтобы создать многоэтапную форму React. Часть 1: создание простой формы
