Проверка зависимостей полей

У меня есть два поля пароля, которые, среди прочего, должны быть одинаковыми, чтобы форма была действительной.

<form onSubmit="resetPassword">
    <ValidationGroup valid-bind="$page.formvalid"  >
        <FlexCol>
            <TextField
                value-bind="$page.password1"
                label="Password 1"
                inputType="password"
                required
                validationRegExp={/(?=.*\d)(?=.*[!@#$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
                minLength="6"
                onValidate="validatePasswordsEqual"
            />
            <TextField
                value-bind="$page.password2"
                label="Password 2"
                inputType="password"
                required
                validationRegExp={/(?=.*\d)(?=.*[!@#$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
                minLength="6"
                onValidate="validatePasswordsEqual"
            />
            <Button
                submit
                disabled-expr="!{$page.formvalid}"
                text="Reset Password"
            />
        </FlexCol>
    </ValidationGroup>
</form>

Тем не менее validatePasswordsEqualзапускается только для редактируемого в данный момент поля, оставляя другое поле всегда неравным. Я пробовал использовать store.notify() изнутри validatePasswordsEqual, но безуспешно.

Как я могу вызвать проверку обоих полей одновременно?

1 ответ

Решение

Вы можете использовать validationParams поле, чтобы запустить проверку, если значение в другом поле изменится.

<TextField
   value-bind="$page.password1"
   label="Password 1"
   inputType="password"
   validationParams={{ password2: { bind: '$page.password2 }}
   required
   validationRegExp={/(?=.*\d)(?=.*[!@#$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
   minLength="6"
   onValidate="validatePasswordsEqual"
/>

Третий аргумент, представленный onValidate обратный вызов будет вычисленным значением validationParams.

Другие вопросы по тегам