WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/auth/signin-section/signin-section/signup/Signup.js

 const Signup = (props) => {
   // props destructuging
   const { captchaKey, addNotification, aes } = props;
   // React Hook Form
-  const { register, handleSubmit, setError, errors } = useForm();
+  const { register, handleSubmit, setError, errors, watch } = useForm({ mode: 'onBlur' });
   // states
   const [termsChecked, setTermsChecked] = useState(false);
                 <input
                   type="email"
                   name="email"
                   ref={register({
                     required: "Este campo es requerido",
+                    pattern: {
+                      value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
+                      message: "Debe ser una dirección de correo electrónico valida"
+                    }
                   })}
                   maxLength="64"
                   placeholder="Correo electrónico"
                 />
                 <i className="la la-envelope"></i>
                 <input
                   type="text"
                   name="first_name"
                   ref={register({
                     required: "Este campo es requerido",
+                    maxLength: {
+                      value: 64,
+                      message: 'Limite de carateres superior al permitido'
+                    }
                   })}
                   placeholder="Nombre"
-                  maxLength="64"
                 />
                 <i className="la la-user"></i>
               </div>
               {errors.first_name && (
                 <FormErrorFeedback>
             <div className="inputContainer">
               <div className="sn-field">
                 <input
                   type="text"
                   name="last_name"
-                  maxLength="64"
                   ref={register({
                     required: "Este campo es requerido",
+                    maxLength: {
+                      value: 64,
+                      message: 'Limite de carateres superior al permitido'
+                    }
                   })}
                   placeholder="Apellido"
                 />
                 <i className="la la-user"></i>
               </div>
                 <input
                   type="password"
                   name="password"
                   ref={register({
                     required: "Este campo es requerido",
+                    pattern: {
+                      value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
+                      message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
+                    }
                   })}
-                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
                   title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                   placeholder="Clave"
-                  minLength="6"
-                  maxLength="16"
                 />
                 <i className="la la-lock"></i>
               </div>
               {errors.password && (
                 <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
                 <input
                   type="password"
                   name="confirmation"
                   ref={register({
                     required: "Este campo es requerido",
+                    validate: (v) => v === watch('password') || 'Las contraseñas deben coincidir'
                   })}
-                  pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
-                  title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                   placeholder="Confirme su clave"
-                  minLength="6"
-                  maxLength="16"
                 />
                 <i className="la la-lock"></i>
               </div>
               {errors.confirmation && (
                 <FormErrorFeedback>
                   />
                   <label htmlFor="terms_and_conditions" onClick={() => setTermsChecked(!termsChecked)}>
                     <span></span>
                   </label>
                   <small onClick={() => setTermsChecked(!termsChecked)}>
-                  Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
+                    Si, acepto los <a href="/terms-and-conditions">Términos y Condiciones.</a>
                   </small>
                 </div>
                 {/* <!--fgt-sec end--> */}
               </div>
               {errors.terms_and_conditions && (

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/auth/signin-section/signin-section/signup/Signup.js – Rev 3136 → 3680