Vee-validate Validate on blur предотвращает отправку формы

Я использую vee-validate для проверки формы в vue.js. Валидация должна быть запущена на размытие. Есть кнопка отправки, которая проверяет все поля в форме.

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

<form v-on:submit.prevent="submit" autocomplete="off">
    <div>
      <div>{{ errors.first('carNumber') }}</div>
      <input v-model="carNumber" name="carNumber" v-validate="'numeric'"/>
      <button type="submit">Submit</button>
    </div>
</form>

Ссылка на образец кода: https://jsfiddle.net/2u6n7xfr/35/

Действия по воспроизведению:

  1. Введите недопустимое значение во входных данных, например: qwerty.
  2. Нажмите кнопку отправки. (Событие отправки не запускается.)
  3. Введите допустимое значение во входных данных, например: 1234.
  4. Нажмите кнопку отправки. (Событие отправки не запускается.)

javascript validation vue.js vuejs2 vee-validate
person ATT    schedule 20.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Заменять

this.$validator.validate("*").then(function(valid) {

С участием:

this.$validator.validateAll().then(function(valid) {

См .: https://jsfiddle.net/Ljo9uw1y/

--

Другая проблема, о которой вы упомянули, связана с физическим щелчком по кнопке: я думаю, ваша проблема в том, что кнопка отправки "перемещается" при нажатии на нее, поэтому событие не запускается. Например, перемещение ошибки под кнопкой отправки приводит к срабатыванию щелчка: jsfiddle.net/5goe4vcf

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

person motatoes    schedule 20.08.2019
comment
Не устраняет проблему. Мне все еще нужно дважды нажать кнопку отправки. - person ATT; 20.08.2019
comment
Я думаю, ваша проблема в том, что кнопка отправки перемещается, когда вы ее нажимаете, поэтому событие не запускается. Например, перемещение ошибки под кнопкой отправки приводит к срабатыванию щелчка: jsfiddle.net/5goe4vcf - person motatoes; 20.08.2019