Creación de formularios React con Formik, sí, React-Bootstrap con una cantidad mínima de dolor y sufrimiento

Hace unos días solicité un trabajo de desarrollador front-end y tuve noticias de la empresa. Siguieron con un correo electrónico y querían que completara un desafío de codificación de React en HackerRank como parte del proceso de entrevista. La prueba constaba de solo dos preguntas y se refería a React. Suena bastante fácil, ¿verdad? Ingrese al escenario a la derecha: validación de formulario en React La prueba se cronometró y solo permitió unos 20 minutos de tiempo para corregir un formulario semiconstruido proporcionado y para agregar la validación del formulario para los formularios de entrada de , , y . Después de tropezar con esta tarea y quedarme sin tiempo, decidí que era hora de buscar bibliotecas de validación de formularios para crear y validar formularios con React. nombre correo electrónico número de teléfono URL Decidí aprender a usar y para validar formularios. Formik Yup En este artículo, le mostraré cómo crear un formulario simple y directo con y para la funcionalidad y la validación, y para la interfaz de usuario. Formik Yup React-Bootstrap Este artículo asume que el lector está familiarizado con , y . Este artículo no analizará los entresijos de la creación de un formulario o estilo básico, el enfoque estará en la validación de formularios con y . React create-react-app npm Formik Yup Construyendo el formulario React-Bootstrap Primero instalemos y con : React-Bootstrap Styled-Components npm npm install react-bootstrap bootstrapnpm install react-bootstrap bootstrap npm i styled-components Después de instalar e incluir la hoja de estilo en nuestro archivo, construyamos un formulario básico usando que incluye una entrada de nombre, correo electrónico, teléfono y URL: React-Bootstrap index.html React-Bootstrap import React from 'react'; import styled from 'styled-components'; import { , Button } from 'react- '; CONTAINER = styled.div` background: #F7F9FA; height: auto; width: 90%; margin: 5em auto; color: snow; -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4); @media(min-width: 786px) { width: 60%; } { color: #24B9B6; font-size: 1.2em; font-weight: 400; } h1 { color: #24B9B6; padding-top: .5em; } . -group { margin-bottom: 2.5em; } `; MYFORM = styled( )` width: 90%; text-align: left; padding-top: 2em; padding-bottom: 2em; @media(min-width: 786px) { width: 50%; } `; BUTTON = styled(Button)` background: #1863AB; border: none; font-size: 1.2em; font-weight: 400; &:hover { background: #1D3461; } `; BasicForm = () => { ( Name : Email : Phone : Blog : Submit ); } export default BasicForm; Form bootstrap // Styled-components styles const label form const Form const const return "mx-auto" Form "formName" Form Label Form Label Form type "text" "name" "Full Name" Form Form "formEmail" Form Label Form Label Form type "text" "email" "Email" Form Form "formPhone" Form Label Form Label Form type "text" "phone" "Phone" Form Form "formBlog" Form Label Form Label Form type "text" "blog" "Blog URL" Form "primary" type "submit" Así es como se ve nuestro formulario: Ahora que nuestro formulario de contacto básico está construido, y y comencemos a construir las funciones de validación: instalemos Formik Yup npm i formik npm i yup nos brinda acceso a una gran cantidad de funciones relacionadas con los formularios, como el almacenamiento de los de los formularios de entrada, , la funcionalidad y la . , es solo un " " que combina muy bien con y se usará para validar los campos de entrada en el formulario. Formik valores el manejo de errores onSubmit validación Sí validador de esquema de objeto Formik Después de importar y en nuestro componente , lo primero que debemos hacer es envolver el formulario dentro de un etiqueta. Después de envolver el formulario dentro del etiqueta estableceremos los valores iniciales de las entradas del formulario utilizando apuntalar. Formik Yup React Formik initialValues Esto consiste en configurar un objeto que contenga todos los valores iniciales de partida para nuestro formulario, así: //Sets initial values for form inputs name: "" email: "" phone: "" blog: "" Después de establecer todos los valores iniciales, necesitamos llamar a una función dentro del etiqueta. enumera una larga lista de ayudantes disponibles. En nuestro caso usaremos , , , , , , & . Formik La documentación de Formik values errors touched handleChange handleBlur handleSubmit isSubmitting Después de inicializar nuestro formulario y llamar a la función de devolución de llamada con los parámetros necesarios, nuestro formulario se ve así: BasicForm = () => { ( { } {( {values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( Name : Email : Phone : Blog : Submit )} ); } export default BasicForm; const return //Sets initial values for form inputs "" "" "" "" /* Callback function containing Formik state and helpers that handle common form actions */ "mx-auto" Form "formName" Form Label Form Label Form type "text" "name" "Full Name" Form Form "formEmail" Form Label Form Label Form type "text" "email" "Email" Form Form "formPhone" Form Label Form Label Form type "text" "phone" "Phone" Form Form "formBlog" Form Label Form Label Form type "text" "blog" "Blog URL" Form "primary" type "submit" Ahora que nuestros valores están inicializados y nuestra función de devolución de llamada contiene los parámetros adecuados, actualicemos los formularios de campo y conéctelos a agregando , , y a nuestras propiedades de formulario: Formik onChange onBlur value BasicForm = () => { ( { } {( {values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( {console. (values)} Name : Email : Phone : Blog : Submit )} ); } export default BasicForm; const return //Sets initial values for form inputs "" "" "" "" /* Callback function containing Formik state and helpers that handle common form actions */ "mx-auto" log Form "formName" Form Label Form Label Form type "text" /* This name property is used to access the value of the form element via values.nameOfElement */ "name" "Full Name" /* Set onChange to handleChange */ /* Set onBlur to handleBlur */ /* Store the value of this input in values.name, make sure this is named the same as the name property on the form element */ Form Form "formEmail" Form Label Form Label Form type "text" "email" "Email" Form Form "formPhone" Form Label Form Label Form type "text" "phone" "Phone" Form Form "formBlog" Form Label Form Label Form type "text" "blog" "Blog URL" Form "primary" type "submit" Fíjate que podemos y esto cerrará la sesión de todos los en nuestro formulario. console.log(values) valores Después de completar las entradas del formulario, se registra lo siguiente en la consola: Creación de un esquema Yup para validar la entrada del formulario Nuestro formulario ahora está conectado a y está manejando los datos de entrada por nosotros. El siguiente paso es agregar validación a nuestro formulario, aquí es donde entra en juego . React-Bootstrap Formik Formik Yup Usando , podemos crear un que le dice a nuestro formulario qué forma deben tener nuestros datos y los requisitos que queremos que tenga cada campo de entrada cuando se valida (es decir, los correos electrónicos deben estar en formato o nombres que deben contener al menos dos letras). Yup esquema de objeto nombre@email.com Para usar crearemos un variable y configúrelo igual a una función que llama a y métodos. contendrá un objeto que contiene los nombres de entrada del formulario ( , , , ). Esto nos permitirá usar para establecer reglas de validación para nuestros elementos ingresados y se ve así: Yup validationSchema Yup's Object Shape Shape nombre correo electrónico teléfono blog Yup const validationSchema = object .shape({ name: , email: , phone: , blog: }); // Schema for yup . Yup () . Yup string () . Yup string () . Yup string () . Yup string () contiene una propiedad para cada uno de nuestros elementos de formulario y le dice a la forma que estos elementos deben ser de tipo . , ofrece muchas funciones diferentes para validar campos de formulario. ValidationSchema Yup.string() string Sí Por el bien de este formulario, usaremos , , , , , y . Consulte la para ver más funciones disponibles. min max required email matches url documentación de Yup y permitirnos establecer longitudes mínimas y máximas para el texto ingresado, nos permite hacer un campo obligatorio, requiere que la entrada esté en un formato de correo electrónico válido (es decir, ), y requiere que la entrada sea una URL válida (es decir, ). min max required email name@email.com url http://www.website.com nos permite pasar una variable que contiene una y verificar que los datos del formulario ingresado coincidan. Usaremos y una para verificar el formato de los datos del formulario del teléfono. Matches expresión regular matches expresión regular Todas estas funciones de validación nos permiten pasar un mensaje de error como segundo parámetro. El objeto de esquema de completo se ve así: validación const phoneRegExp = /^(\+?\d{ , })?\s?-?\s?($?\d{ }$?)\s?-?\s?($?\d{ }$?)\s?-?\s?($?\d{ }$?)?$/ const validationSchema = object .shape({ name: .min( , ) .max( , ) .required( ), email: .email( ) .max( , ) .required( ), phone: .matches(phoneRegExp, ) .required( ), blog: .url( ) .required( ) }); // RegEx for phone number validation 0 4 3 3 4 // Schema for yup . Yup () . Yup string () 2 "*Names must have at least 2 characters" 100 "*Names can't be longer than 100 characters" "*Name is required" . Yup string () "*Must be a valid email address" 100 "*Email must be less than 100 characters" "*Email is required" . Yup string () "*Phone number is not valid" "*Phone number required" . Yup string () "*Must enter URL in http://www.example.com format" "*URL required" Conectando el esquema a nuestro formulario Formik proporciona a nuestro formulario un y podemos usar nuestra variable de esquema para pasar nuestro esquema a nuestro formulario de esta manera: Formik accesorio de esquema de validación Validación Yup name: "" email: "" phone: "" blog: "" // Hooks up our validationSchema to Formik Aplicar una clase de error y cambiar el cuadro de entrada a rojo cuando hay un error Ahora el formulario está configurado para realizar la validación usando el Si queremos cambiar el cuadro de entrada del formulario a rojo cuando el usuario ingresa datos que no pasan nuestras pruebas de validación definidas por , podemos agregar una para hacer eso y usar un para probar si hay un error y aplicar la clase en caso de que haya un error: validationSchema esquema validationSchema clase CSS operador ternario <Form.Control type= /* This used access value form element via values.nameOfElement */ = placeholder= /* Set onChange handleChange */ onChange={handleChange} /* Set onBlur handleBlur */ onBlur={handleBlur} /* Store value this input values. , make sure this named same form element */ value={values. } /* Check field (this field) has been touched there an , so add . styles defined CSS (make input box red) */ className={touched. && errors. ? : null} /> "text" name property is to the of the name "name" "Full Name" to to the of in name is the as the name property on the name if the name and if is error if the error class in the the name name "error" los property es uno de los parámetros llamados en nuestro función de devolución de llamada y prueba si el usuario ha hecho clic en ese elemento en particular. prueba si el usuario ha hecho clic en el campo de entrada de nombre y si hay un error al validar los datos ingresados. Si hay un error, aplicamos la clase de error al elemento y en nuestro cambiamos el borde del cuadro de entrada a rojo. touched Formik {touched.name && errors.name ? "error" : null} CSS Este aplicará esta recién agregada que vuelve rojo el cuadro de entrada: operador ternario clase CSS { : solid ; } .error border 2px #FF6565 Ahora, cuando un usuario ingresa texto que no pasa nuestras pruebas de validación, el cuadro de entrada se vuelve rojo: Agregar un mensaje de error explicando el error Anteriormente en nuestro cuando usamos para establecer reglas para la validación, incluimos mensajes de error para mostrar la explicación del error de entrada al usuario. ¿Cómo hacemos para mostrar el mensaje de error en el elemento de formulario al que pertenece? validationSchema Yup Podemos usar el objeto y el objeto proporcionado a nuestro formulario por en la función de devolución de llamada junto con un para mostrar el mensaje de error apropiado: touch errors Formik operador ternario {touched.name && errors.name ? ( ): } {errors.name} div className "error-message" div null Este aplicará esta recién agregada que maneja el estilo del mensaje de error: operador ternario clase CSS { : ; : . . ; : ; : absolute; : . ; } .error-message color #FF6565 padding 5em 2em height 1em position font-size 8em Al agregar un con las pruebas apropiadas para cada entrada de formulario, podemos agregar el mensaje de error correcto de para cada entrada de formulario. operador ternario validateSchema El formulario completo y el esquema ahora se ven así: phoneRegExp = /^(\+?\ {0,4})?\s?-?\s?($?\ {3}$?)\s?-?\s?($?\ {3}$?)\s?-?\s?($?\ {4}$?)?$/ validationSchema = Yup.object().shape({ name: Yup. () . (2, ) . (100, ) .required( ), email: Yup. () .email( ) . (100, ) .required( ), phone: Yup. () .matches(phoneRegExp, ) .required( ), blog: Yup. () .url( ) .required( ) }); BasicForm = () => { ( { } {( {values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( {console. (values)} Name : { } {touched.name && errors.name ? ( {errors.name} ): null} Email : {touched.email && errors.email ? ( {errors.email} ): null} Phone : {touched.phone && errors.phone ? ( {errors.phone} ): null} Blog : {touched.blog && errors.blog ? ( {errors.blog} ): null} Submit )} ); } export default BasicForm; // RegEx for phone number validation const d d d d // Schema for yup const string min "*Names must have at least 2 characters" max "*Names can't be longer than 100 characters" "*Name is required" string "*Must be a valid email address" max "*Email must be less than 100 characters" "*Email is required" string "*Phone number is not valid" "*Phone number required" string "*Must enter URL in http://www.example.com format" "*URL required" const return //Sets initial values for form inputs "" "" "" "" // Hooks up our validationSchema to Formik /* Callback function containing Formik state and helpers that handle common form actions */ "mx-auto" log Form "formName" Form Label Form Label Form type "text" /* This name property is used to access the value of the form element via values.nameOfElement */ "name" "Full Name" /* Set onChange to handleChange */ /* Set onBlur to handleBlur */ /* Store the value of this input in values.name, make sure this is named the same as the name property on the form element */ /* Check if the name field (this field) has been touched and if there is an error, if so add the .error class styles defined in the CSS (make the input box red) */ "error" /* Applies the proper error message from validateSchema when the user has clicked the element and there is an error, also applies the .error-message CSS class for styling */ "error-message" Form Form "formEmail" Form Label Form Label Form type "text" "email" "Email" "error" "error-message" Form Form "formPhone" Form Label Form Label Form type "text" "phone" "Phone" "error" "error-message" Form Form "formBlog" Form Label Form Label Form type "text" "blog" "Blog URL" "error" "error-message" Form "primary" type "submit" Ahora, cuando un usuario ingresa datos que no pasan nuestra prueba de validación, se muestra el mensaje de error que definimos anteriormente en el . esquema El resultado final se ve así: Manejo del envío de formularios con Formik Por último, pero no menos importante, nuestro debe enviarse cuando el usuario hace clic en el botón Enviar. nos proporciona una prop que se encarga de esto. pasamos el apoyar los valores y también y . se establecerá en cuando el usuario envíe el formulario y se llamará después de que se envíe el formulario para borrar el envío posterior del formulario. formulario Formik onSubmit onSubmit setSubmitting resetForm setSubmitting verdadero resetForm Nuestra etiqueta , con un la función ahora se ve así: Formik onSubmit { // button submits form form the process submitting, submit button disabled setSubmitting( ); // Resets form after submission complete resetForm(); // Sets setSubmitting to after form reset setSubmitting( ); }} > "" "" "" "" When and is in of is true is false is false Para llamar a este función nuestra forma tiene que tener un conjunto de accesorios para : onSubmit onSubmit handleSubmit MYFORM onSubmit {handleSubmit} className "mx-auto" Además de manejar el envío del formulario, también podemos deshabilitar el botón de envío mientras se envía el formulario, de modo que después de que el usuario haga clic en enviar, el botón de envío esté mientras el formulario está en proceso de envío. deshabilitado Hacemos esto agregando una propiedad al botón y estableciéndolo igual a : deshabilitada isSubmitting Submit BUTTON variant "primary" type "submit" disabled {isSubmitting} BUTTON Ahora, el formulario se cuando el usuario hace clic en el botón Enviar, mientras se envía el formulario, el botón está inactivo y, una vez que se completa el envío, el formulario se restablece y borra los campos. envía Simulación de envío y visualización de lo que envía el formulario En una aplicación de pila completa, el formulario se enviaría a través de una . En aras de ver los datos que envía nuestro formulario en este ejemplo sin base de datos, podemos los valores cuando el usuario el formulario. solicitud POST alert envía Agrega un función que tiene un retraso de 0,5 segundos y contiene un con un función que imprime los datos del formulario cuando se el formulario. setTimeout alert JSON.stringify envía También podemos mover el y funciones dentro de este para que se llamen después de un retraso de 0,5 segundos: resetForm setSubmitting setTimeout // Simulate submitting , shows us submitted, resets form setTimeout(() => { alert( .stringify( , , )); resetForm(); setSubmitting( ); }, ); to database values JSON values null 2 false 500 Nuestro formulario de contacto ya está completo. El componente, en su totalidad, se ve así: React from ; styled from ; { Form, Button } from ; { Formik, ErrorMessage } from ; * as Yup from ; CONTAINER = styled.div` : #F7F9FA; : auto; : %; margin: em auto; : snow; -webkit- -shadow: px px px px rgba( , , , ); -moz- -shadow: px px px px rgba( , , , ); -shadow: px px px px rgba( , , , ); @media( - : px) { : %; } label { : # B9B6; font- : em; font-weight: ; } h1 { : # B9B6; padding-top: em; } .form-group { margin-bottom: em; } .error { border: px solid #FF6565; } .error-message { : #FF6565; padding: em em; : em; position: absolute; font- : em; } `; MYFORM = styled(Form)` : %; -align: left; padding-top: em; padding-bottom: em; @media( - : px) { : %; } `; BUTTON = styled(Button)` : # AB; border: none; font- : em; font-weight: ; &:hover { : # D3461; } `; phoneRegExp = /^(\+?\d{ , })?\s?-?\s?($?\d{ }$?)\s?-?\s?($?\d{ }$?)\s?-?\s?($?\d{ }$?)?$/ validationSchema = Yup.object(). ({ name: Yup.string() . ( , ) . ( , ) .required( ), email: Yup.string() .email( ) . ( , ) .required( ), phone: Yup.string() .matches(phoneRegExp, ) .required( ), blog: Yup.string() .url( ) .required( ) }); BasicForm = () => { ( { setSubmitting( ); setTimeout(() => { alert(JSON.stringify(values, , )); resetForm(); setSubmitting( ); }, ); }} > { } {( {values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( {console. (values)} Name : { } {touched.name && errors.name ? ( {errors.name} ): } Email : {touched.email && errors.email ? ( {errors.email} ): } Phone : {touched.phone && errors.phone ? ( {errors.phone} ): } Blog : {touched.blog && errors.blog ? ( {errors.blog} ): } Submit )} ); } export BasicForm; import 'react' import 'styled-components' import 'react-bootstrap' import 'formik' import 'yup' const background height width 90 5 color box 5 5 5 0 0 0 0 0.4 box 5 5 5 0 0 0 0 0.4 box 5 5 5 0 0 0 0 0.4 min width 786 width 60 color 24 size 1.2 400 color 24 .5 2.5 2 color .5 .2 height 1 size .8 const width 90 text 2 2 min width 786 width 50 const background 1863 size 1.2 400 background 1 // RegEx for phone number validation const 0 4 3 3 4 // Schema for yup const shape min 2 "*Names must have at least 2 characters" max 100 "*Names can't be longer than 100 characters" "*Name is required" "*Must be a valid email address" max 100 "*Email must be less than 100 characters" "*Email is required" "*Phone number is not valid" "*Phone number required" "*Must enter URL in http://www.example.com format" "*URL required" const return //Sets initial values for form inputs "" "" "" "" // When button submits form and form is in the process of submitting, submit button is disabled true // Simulate submitting to database, shows us values submitted, resets form null 2 false 500 /* Callback function containing Formik state and helpers that handle common form actions */ "mx-auto" log "formName" "text" /* This name property is used to access the value of the form element via values.nameOfElement */ "name" "Full Name" /* Set onChange to handleChange */ /* Set onBlur to handleBlur */ /* Store the value of this input in values.name, make sure this is named the same as the name property on the form element */ /* Check if the name field (this field) has been touched and if there is an error, if so add the .error class styles defined in the CSS (make the input box red) */ "error" null /* Applies the proper error message from validateSchema when the user has clicked the element and there is an error, also applies the .error-message CSS class for styling */ "error-message" null "formEmail" "text" "email" "Email" "error" null "error-message" null "formPhone" "text" "phone" "Phone" "error" null "error-message" null "formBlog" "text" "blog" "Blog URL" "error" null "error-message" null "primary" "submit" default Ver el formulario de ejemplo en línea Puede ver el o consultar el código en para este proyecto. formulario en línea aquí Github Repo Ahora hemos creado con éxito un formulario con funciones de validación en React con una cantidad mínima de dolor y sufrimiento.