la validation native des règles du contrôleur de réaction-hook-form ne fonctionne pas
P粉445714413
P粉445714413 2024-03-26 18:35:16
0
1
460

J'ai une application développée avec React Native. J'utilise React-hook-form pour les écrans de connexion et d'inscription. J'ai un schéma de validation que j'ai créé. Je ne peux pas utiliser ce schéma de validation avec les règles du contrôleur React-Hook-Form car je ne peux pas attribuer la valeur d'entrée, aidez-moi s'il vous plaît !

const formKeys = {
    email: 'email',
    password: 'password',
  };

  const {
    handleSubmit,
    control,
    formState: {errors},
  } = useForm();

<Controller
                control={control}
                name={formKeys.email}
                render={({field: {onChange, value}}) => (
                  <InputFields
                    errorMessage={errors[formKeys.email]?.message.toString()}
                    value={value}
                    onChangeText={onChange}
                    autoCapitalize={'none'}
                    placeholder={t('common:email')}
                    image={
                      <View style={styles.userIconsStyle}>
                        <EmailIcon/>
                      </View>
                    }
                  />
                )}
                rules={{
                  required: emailValidation() //input value required here,
                  minLength: minLengthValidation(validationSchema.email.minLength),
                  maxLength:maxLengthValidation(validationSchema.email.maxLength),
                }}
              />

/*validation schema*/

export const emailValidation = (v: string): boolean | string => {
  const {t,i18n}=useTranslation();
  const emailRegx = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
  if (v) {
    return emailRegx.test(v) || `${t('common:errorMessages:invalidEmailAddress')}`;
  } else return `${t('common:email')} ${t('common:errorMessages:isRequired')}`;
};

P粉445714413
P粉445714413

répondre à tous(1)
P粉811329034

J'ai créé un exemple simple en utilisant React js au lieu de React Native (ce ne sera pas différent ici)

import { useForm, Controller } from "react-hook-form";

type FormValues = {
  email: string;
};

const emailValidation = (v: string): boolean | string => {
  // const {t,i18n}=useTranslation();
  const emailRegx = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
  if (v) {
    return emailRegx.test(v) || "invalidEmailAddress";
  } else return "isRequired";
};

export default function App() {
  const { handleSubmit, control, formState: {errors} } = useForm({mode: 'onChange'});

  console.log(errors);
  
  return (
    
console.log(data))}> ( )} rules={{ validate: { required: (value) => emailValidation(value) }, }} />
); }

Bac à sableExemple ici

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal