Hemos desactivado el botón de envío hasta que satisfaga todas las condiciones que hemos configurado. Pero de alguna manera necesitamos una forma de validar el valor de la entrada de manera diferente.
El formulario Redux proporciona la propiedad adicional junto con el HOC, que se llama validar. Esto significa que podemos pasar los valores a la función de validación, y devuelve el mensaje apropiado basado en los criterios de validación.
Vamos a crear un nuevo ayudante de validación llamado FormValidator.js y pegar las siguientes líneas de código..:
12345678910111213141516171819202122232425exportconstformValidatorHelper=valores={{};if(!values.firstName){ errores.firstName="Se requiere nombre";}elseif(values.firstName.length<3){ errores.firstName="El nombre debe ser lastName="Se requiere apellido";}elseif(values.lastName.length<3){ errores.lastName="El apellido debe ser > 3";}if(!values.email){ errores. email="Se requiere email";}elseif(!/(.+)@(.+){2,}.(.+){2,}/i.test(values.email)){ errores.email="Email inválido!!!";}console.log(errores);return errors;};javascript
Como puedes ver en el archivo del validador, es sólo una simple función que acepta los valores de la forma, y en base a la condición, devolverá el objeto de error al componente de la forma.
Ahora abre el archivo que creamos llamado SimpleForm.jsx e importa la función validadora, así..:
1import{ formValidatorHelper }from"./FormValidator.js";jsx
Después de importar la función, tenemos que pasarla a la reduxForm() HOC como valor a los puntales llamados validar, así.:
1234exportdefaultreduxForm({ form: "SimpleForm", validate: formValidatorHelper})(SimpleForm);jsx
Eso es todo. Hemos completado nuestro ejemplo implementando la forma reducida junto con el React.
Inicialmente, todos los campos son obligatorios, pero en cuanto cambiemos el valor, el mensaje desaparecerá con frecuencia. Pero tened en cuenta que una vez que toquemos los controles de los formularios, la validación se activará y mostrará el mensaje de error junto con el control de los formularios. Puede ser cualquier elemento, como un párrafo, un intervalo, etc.
Cuando proporcionemos el valor incorrecto al campo, éste devolverá el mensaje apropiado y también desaparecerá en cuanto proporcionemos el valor válido.
El ejemplo muestra que así es como hemos implementado nuestro componente de forma, el componente de entrada genérica, y por último, la función de ayuda del validador.