• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

final form react - walidacja

Aruba Cloud - Virtual Private Server VPS
0 głosów
352 wizyt
pytanie zadane 12 lutego 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)

Pisząc walidację formularza w final form react, nie wiem jak połączyć ze sobą 2 rodzaje dodania funkcji do sprawdzenia walidacji. W polu Field dodając walidację mogę ją sprawdzić tylko dla wartości tego pola. Potrzebuję jednak funkcji do sprawdzenia czy hasło i jego potwierdzenie jest takie samo. Dodając taką funkcję w polu Form w atrybucie validate ona zwyczajnie nie działa..

 

const required = value => (value ? undefined : 'To pole jest wymagane!')
        const mustBeNumber = value => (isNaN(value) ? 'Wartość nie jest liczbą!' : undefined)
        const minValue =  value =>
            isNaN(value) || value >= 0 ? undefined : `Wartość nie może być ujemna!`
        const emailReg = value => (value.match(/^[a-z\d]+[\w\d.-]*@(?:[a-z\d]+[a-z\d-]+\.){1,5}[a-z]{2,6}$/) ? undefined : `Niewłaściwy adres e-mail`);
        
        const composeValidators = (...validators) => value =>
            validators.reduce((error, validator) => error || validator(value), undefined)

        return (
            <React.Fragment>
                    <Form
                        onSubmit={this.onSubmit}
                        render={({ handleSubmit, form, submitting, pristine, values }) => (
                            <form onSubmit={handleSubmit}
                            validate={values => {
                                const errors = {}
                                if (values.confirm !== values.password) {
                                  errors.confirm = 'Hasła różnią się!';
                                }
                                return errors;
                              }}>
                                <Field name="email" 
                                    validate={composeValidators(required, emailReg)} >
                                    {({ input, meta }) => (
                                        <div>
                                            <label>E-mail:</label>
                                            <input
                                                {...input}
                                                type="email"
                                                placeholder="E-mail"
                                                className={styles.pole} />
                                            {meta.error && meta.touched && <span>{meta.error}</span>}
                                        </div>
                                    )}
                                </Field>
                                <Field name="password"
                                validate={required} >
                                    {({ input, meta }) => (
                                        <div>
                                            <label>Hasło:</label>
                                            <input
                                                {...input}
                                                type="password"
                                                placeholder="Hasło" />
                                            {meta.error && meta.touched && <span>{meta.error}</span>}
                                        </div>
                                    )}
                                </Field>
                                <Field name="confirm"
                                validate={required} >
                                    {({ input, meta }) => (
                                        <div>
                                            <label>Powtórz hasło:</label>
                                            <input
                                                {...input}
                                                type="password"
                                                placeholder="Powtórz hasło" />
                                            {meta.error && meta.touched && <span>{meta.error}</span>}
                                        </div>
                                    )}
                                </Field>

 

komentarz 12 lutego 2020 przez Tomek Sochacki Ekspert (227,490 p.)
Spróbuj może dekoratora, np. https://codesandbox.io/s/oq52p6v96y
komentarz 13 lutego 2020 przez poldeeek Mądrala (5,980 p.)

Jak na to spojrzałem to myślę, że byłbym w stanie wyświetlić taką informację za pomocą jakiejś zmiennej pomocniczej, ale nie mam pojęcia jak dostać się wtedy do zmiennej error tak żeby formularz się zablokował...
Znalazłem rozwiązanie : https://codesandbox.io/s/changing-field-level-validators-zc8ei?fontsize=14
A w moim kodzie wygląda to tak:
 

        const comparePasswd = password => value => ( (password !== value) ? 'Hasła różnią się!' : undefined );
<Field name="confirm"
                                validate={composeValidators(required, comparePasswd(values.password))} >
                                    {({ input, meta }) => (
                                        <div>
                                            <label>Powtórz hasło:</label>
                                            <input
                                                {...input}
                                                type="password"
                                                placeholder="Powtórz hasło" />
                                            {meta.error && meta.touched && <span>{meta.error}</span>}
                                        </div>
                                    )}
                                </Field>

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
0 odpowiedzi 435 wizyt
pytanie zadane 11 listopada 2021 w JavaScript przez Bakkit Dyskutant (7,600 p.)
0 głosów
0 odpowiedzi 232 wizyt
pytanie zadane 4 maja 2021 w JavaScript przez Bakkit Dyskutant (7,600 p.)
0 głosów
1 odpowiedź 304 wizyt

93,327 zapytań

142,325 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...