Проверка формы VueJS с VeeValidate, не может печатать на некоторых мобильных устройствах - PullRequest
Новая
       8

Проверка формы VueJS с VeeValidate, не может печатать на некоторых мобильных устройствах

0 голосов
/ 29 ноября 2018

У нас есть странная проблема в форме, которая проверяется с помощью Vee-Validate У нас есть ввод: 

 <input
            v-validate="'required|name'"
            id="firstName"
            v-model="firstName"
            :class="{'is-invalid': errors.has('firstName'), 'filled': firstNameFilled}"
            type="text"
            class="form-control"
            name="firstName">
          <label for="firstName">Vorname*</label>

Следующий скрипт: 

    computed: {
        ...mapGetters({
          formData: 'registration/formData'
        }),
     firstNameFilled () {
         return this.formData.firstName !== null
        },
      firstName: {
         get () {
            return this.formData.firstName
         },
      set (data) {
        this.$store.dispatch('registration/updateFormData', { firstName: 
          data })
        }
       },
     methods: {
       async validate () {
          this.registrationButtonDisabled = true
         try {
            const needCaptcha = this.$route.query.utm_campaign && 
           this.$route.query.utm_campaign.includes('display');
          this.$store.dispatch('registration/updateFormData', { needCaptcha: needCaptcha });

         const result = await this.$validator.validateAll()
         if (result) {
          this.next()
         }
        } catch (e) {
         console.log(e)
        }
        this.registrationButtonDisabled = false
       }

Проблема:

На некоторых мобильных устройствах Chromes (версия 7), когда вы начинаете печатать в поле ввода, поле мгновенно сбрасывается и проверяется с ошибкой.Примечание:

  • Это не происходит на всех Chrome версии 7, в зависимости от устройства
  • Если вы подключите клавиатуру к телефону, она будет работать
  • Это только ведет себятаким образом, если первый ввод в это поле после инициализации осуществляется через сенсорную клавиатуру.Если вы печатаете на обычной клавиатуре, сбросьте поле и введите с помощью сенсорной клавиатуры, если работает.
  • Если вы не печатаете, а вместо этого пользуетесь советами по использованию сенсорных клавиатур, проверка выполняется корректно, но остается пустой.В этом случае устанавливается заполненный класс.Это заставляет нас думать, что модель устанавливается, проверяется и затем сбрасывается по какой-то странной причине.

Это, очевидно, трудно отладить, у кого-нибудь есть идея?

1 Ответ

0 голосов
/ 01 декабря 2018

Итак, в Vee-Validate есть ошибка.На некоторых мобильных устройствах $watch-API обрабатывается по-разному, что означает, что v-model не обновляется в реальном времени.v-validate не может справиться с этим.

Обходной путь должен был бы добавить data-vv-validate-on="blur" к входу, чтобы заставить Ви ждать, пока модель фактически не будет установлена.

Несмотря на то, что разработчики давали обещания несколько месяцев назад, кажется неясным, когда это когда-нибудь будет исправлено.

Вот ссылка на GitHub-Discussion: https://github.com/baianat/vee-validate/issues/1281#issuecomment-399920810

Проблема, похоже, касается Chrome на некоторых устройствах, не связанных с используемой версией, а также Safari.Firefox кажется стабильным

...