VE валидация «требуется» валидация работает только при изменении поля - PullRequest
Новая
       8

VE валидация «требуется» валидация работает только при изменении поля

0 голосов
/ 10 мая 2018

Ниже мой код. Три поля есть в моей форме. Имя Второе Имя Фамилия. Все эти поля установлены как обязательные. Разница лишь в том, что «Имя и Фамилия» содержит тег ввода, а «Среднее имя» содержит тег ввода b-формы. На самом деле моя проблема в том, что, когда я фокусирую (размываю) эти поля («Имя и Фамилия»), он выдает требуемую ошибку, но когда я делаю то же самое для поля («Среднее имя»), это не Image1, Я должен ввести значение в это ("Middlename") поле Image2 , затем я удалил значение, которое выдает ошибку Image3 Т.е. необходимая проверка работает только «при изменении» поля («Middlename»). В чем причина? 

<template>
 <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">First Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Firstname">
                        <span v-show="errors.has('Firstname')" class="is-danger">{{ errors.first('Firstname') }}</span>
               </b-form-group>
            </b-col>
            <b-col sm="3">
              <b-form-group>
                <label for="name">Middle Name </label>
                <b-form-input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Middlename"> </b-form-input>
                  <span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Last Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname">
                        <span v-show="errors.has('Lastname')" class="help is-danger">{{ errors.first('Lastname') }}</span>
              </b-form-group>
            </b-col>
        </b-row>
        <input type="submit" value="Submit" @click="validateForm">
 </b-card>
</template>

<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

export default {
  name: 'addEmpl',
   created: function() {
    this.$validator.extend('Name', {
    getMessage: field => '* Enter valid ' + field + '',
    validate: value => /^[a-zA-Z]*$/.test(value)
    });
}
}
</script>

<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>

1 Ответ

0 голосов
/ 09 августа 2018

Прежде всего, я также новичок в Vue.js и Vee-validate, так что я исправлен.

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

По сути, вам нужно, чтобы компонент вел себя как вход, то есть излучал необходимые события, чтобы Vee-validate мог подобрать их ('input', 'change', 'blur' и т. Д. ).

Например, если ваш компонент представляет собой div-упаковку для ввода, он будет выглядеть примерно так: 

<template>
   <div class="myClassForDiv">
      <input 
         type="text"
         class="myClass"
         @blur="$emit('blur')"
         @input="$emit('input', $event.target.value)"
      >
   </div>
</template>

<script>
   export default {
      name: "b-form-input"
   }
</script>

Часть, относящаяся к вопросу, @blur="$emit('blur')". Без этой строки VeeValidate не может получить уведомление о происходящем событии размытия, следовательно, не проверяет (я не знаю, какие другие события VeeValidate слушает по умолчанию, но «размытие» работает для меня, а «focusout» - нет. всегда можете использовать директиву data-vv-validate-on для особых событий, специфичных для ваших компонентов).

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

https://medium.com/@logaretm/authoring-validatable-custom-vue-input-components-1583fcc68314

...