Hello hello,
Je suis en train de faire une page "paramètres", et j'ai deux formulaires sur cette page. J'utilise React Hook Form pour gerer les infos.
Mon problème c'est que quand je valide le 2eme, ça tente de valider le premier.
<div style={{
marginBottom: '20px'
}}>
<form onSubmit={handleSubmit(submitClickedHandler)} className={classes.form}>
<label className={classes.label}>Changer de mot de passe</label>
<p>
<input placeholder='Mot de passe actuel'
{...register('currentPassword', {
required: true,
minLength: 6,
maxLength: 10
})} />
{errors.currentPassword && errors.currentPassword.type == 'required' && <label className={classes.error}>Ce champ est obligatoire</label>}
{errors.currentPassword && errors.currentPassword.type == 'minLength' && <label className={classes.error}>6 caractères minimum</label>}
{errors.currentPassword && errors.currentPassword.type == 'maxLength' && <label className={classes.error}>10 caractères maximum</label>}
</p>
<p>
<input placeholder='Nouveau mot de passe'
{...register('newPassword', {
required: true,
minLength: 6,
maxLength: 10
})} />
{errors.newPassword && errors.newPassword.type == 'required' && <label className={classes.error}>Ce champ est obligatoire</label>}
{errors.newPassword && errors.newPassword.type == 'minLength' && <label className={classes.error}>6 caractères minimum</label>}
{errors.newPassword && errors.newPassword.type == 'maxLength' && <label className={classes.error}>10 caractères maximum</label>}
</p>
<button className={classes.submit}>
Changer
</button>
</form>
</div>
<div>
<form onSubmit={handleSubmit(submitPrivateClickedHandler)} className={classes.form} >
<p style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '30px'
}}>
<label style={{
color: '#F1E0D6'
}} htmlFor='private'>Compte privé ?</label>
<input id='private' type='checkbox' style={{
width: '20px',
height: '20px',
cursor: 'pointer',
margin: 0
}} placeholder='Oui'
{...register('prv', {
reduired: false
})}
/>
</p>
<button className={classes.submit}>Modifier</button>
</form>
</div>
Message édité le 02 février 2022 à 18:45:11 par les-toilettes
