VeeValidate v3 предотвращает щелчки при проверке размытия - PullRequest
Новая
       65

VeeValidate v3 предотвращает щелчки при проверке размытия

0 голосов
/ 04 ноября 2019

У меня есть форма с автофокусом на первом поле. Я использую готовый режим проверки.

Проблема в том, что когда я щелкаю в любом месте страницы, ввод теряет фокус и получает подтверждение и отменяет щелчок на странице.

Есть ли способ как-нибудь разрешить размытие с пустым значением, если я не вызову проверку вручную при отправке?

Мой фрагмент кода: 

<b-form-group id="input-group-2" label="Your name:" label-for="input-2">
    <validation-provider name="name" rules="required|min:2" mode="eager" v-slot="{ errors }">
        <b-form-input
            id="input-2"
            v-model="credentials.name"
            placeholder="Your name"
            :class="{'is-invalid' : errors.length}"
            autofocus
        />
        <b-form-invalid-feedback :state="!errors.length">{{errors[0]}}</b-form-invalid-feedback>
    </validation-provider>
</b-form-group>

enter image description here

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Закончено, избегая автоматической проверки, переключено в режим passive вместо нетерпеливого. В файле конфигурации с этой строкой: 

setInteractionMode('passive');

Я просто вызываю команду validate вручную при отправке: 

async onSubmit() {
  const isValid = await this.$refs.observer.validate();
0 голосов
/ 08 ноября 2019

Я хотел бы прояснить что-то, что vee-validate не предотвращает события "щелчка", просто когда вы нажимаете снаружи, вы размываете поле. Таким образом, вызывая проверку при появлении сообщения об ошибке, он выталкивает другие элементы из-за своей высоты строки, которая нажимает кнопку / ссылку вниз, заставляя вас щелкать снаружи.

Я бы сказал, что это не ви-validate проблема, а скорее проблема CSS, в идеале, если вы отображаете сообщения об ошибках под полями, вы должны компенсировать дополнительное пространство, чтобы предотвратить переход пользовательского интерфейса, что также раздражает пользователей.

Простойmargin-bottom, равное высоте строки сообщения об ошибке, должно сработать, другой подход заключается в том, чтобы иметь сообщение об абсолютной ошибке с относительной оберткой вокруг них, иметь нижний отступ, равный высоте строки, и это также будет работать. 

.InputMargin:not(.has-error) {
  margin-bottom: 16px;
}

.InputPadding:not(.has-error) {
  position: relative;
  padding-bottom: 16px;
}

.InputPadding:not(.has-error) span {
  position: absolute;
  bottom: 0;
  left: 0;
}

Вы просматриваете пример здесь: https://jsfiddle.net/logaretm/4mx0hy58/17/

Теперь, если выбранная вами среда пользовательского интерфейса не справляется с этим делом, вы можете сообщить об этом PR или открыть вопрос вих проектный трекер.

...