Je suis assez nouveau sur React, et j'ai une page d'inscription où j'ai un champ de mot de passe à valider avec une Regex.
J'utilise Formik et Yup pour les validations, mais j'ai rencontré une erreur où il dit que la propriété où la fonction de longueur est appelée n'est pas définie lorsque je tape dans le champ "mot de passe".
Il y a une fonction appelée "matches" dans yup, que j'essaie d'utiliser pour vérifier une expression régulière. C'est alors que j'obtiens cette erreur. J'ai supprimé cette validation, après quoi les autres validations définies sur le champ de mot de passe ont bien fonctionné.
Voici le code du fichier SignUp.js: -
import React from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import "./SignUp.css";
import * as yup from "yup";
import { Formik } from "formik";
const schema = yup.object({
username: yup.string().required('Please Enter a username'),
email: yup
.string()
.email()
.required('Please Enter your Email'),
confirmEmail: yup
.string()
.email()
.required()
.oneOf([yup.ref("email"), null], "Emails must match"),
password: yup
.string()
.required('Please Enter your password')
.matches(
"^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{8,}$",
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
),
confirmPassword: yup
.string()
.required()
.oneOf([yup.ref("password"), null], "Passwords must match")
});
const SignUp = props => {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
username: "",
email : "",
confirmEmail : "",
password: "",
confirmPassword : ""
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<div className="SignUpForm">
<h1 className="SignInHeading">SIGN UP</h1>
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formBasicUserName">
<Form.Control
size="lg"
className="SignUpFormControls"
type="text"
name="username"
value={values.username}
onChange={handleChange}
placeholder="Username"
isInvalid={!!errors.username}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.username}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder="Email"
value={values.email}
onChange={handleChange}
name="email"
className="SignUpFormControls"
size="lg"
isInvalid={!!errors.email}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.email}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicConfirmEmail">
<Form.Control
type="email"
className="SignUpFormControls"
size="lg"
name="confirmEmail"
value = {values.confirmEmail}
onChange={handleChange}
placeholder="Confirm Email"
isInvalid={!!errors.confirmEmail}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.confirmEmail}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control
className="SignUpFormControls"
size="lg"
type="password"
name="password"
value={values.password}
onChange={handleChange}
placeholder="Password"
isInvalid={!!errors.password}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicConfirmPassword">
<Form.Control
className="SignUpFormControls"
size="lg"
name="confirmPassword"
onChange={handleChange}
type="password"
value={values.confirmPassword}
placeholder="Confirm Password"
isInvalid={!!errors.confirmPassword}
/><Form.Control.Feedback className="FeedBack" type="invalid">
{errors.confirmPassword}
</Form.Control.Feedback>
</Form.Group>
<Button variant="primary" className="SignUpButton" type="submit">
Sign Up
</Button>
<Form.Text>
Already a User?{" "}
<a href="#signin" onClick={props.toggle}>
Sign In
</a>
</Form.Text>
</Form>
</div>)}
</Formik>
);
};
export default SignUp;
Voici l'erreur dans la console chrome console: -
formik.esm.js:721 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at yupToFormErrors (formik.esm.js:721)
at formik.esm.js:276
Rien de ce qui précède ne fonctionne pour moi, ma solution est ci-dessous
password: yup
.string()
.required("Şifreniz kayıt olmak için gereklidir.")
.matches(
/^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/,
"En Az 8 Karakter, Bir Büyük Harf, Bir Küçük Harf, Bir Rakam ve Bir Özel Karakter İçermelidir"
)