Почему не работает в vuelidate.js валидация чекбокса?

Question

sergeyviktorovich @sergeyviktorovich

Vue.js

Почему не работает в vuelidate.js валидация чекбокса?

<input type="checkbox" id="checkbox"   v-model="checkbox" :class="{invalid:($v.checkbox.$dirty && !$v.checkbox.required)}"/><label >Принимаю условия использования</label>

 validations: {
    checkbox: {
      required
    }
 }

Вопрос задан более трёх лет назад
226 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Вадим @MrDecoy

Потому что пробел?
$v. checkbox

Написано более трёх лет назад
sergeyviktorovich @sergeyviktorovich Автор вопроса

Вадим, нет не из-за пробела

Написано более трёх лет назад
Вадим @MrDecoy

sergeyviktorovich, Ну а отладку Вы пробовали проводить? Vue dev tools? Смотреть значения параметров в соответствующих computed свойствах? Ошибки есть какие то?

Написано более трёх лет назад
sergeyviktorovich @sergeyviktorovich Автор вопроса

Вадим, я просто смотрел объект this.$v и в нем свойство чекбокc ,оно всегда required true

Написано более трёх лет назад
Вадим @MrDecoy

sergeyviktorovich, а в data.checkbox у Вас что?

Написано более трёх лет назад

sergeyviktorovich @sergeyviktorovich Автор вопроса

Вадим, data.checkbox у меня просто в коде сh это checkbox тут в вопросе
ch:false

<body >
    
  <div id="app">
    <form @submit.prevent="submitHandler">
        <label for="name" >Name</label>
        <input type="text" id="name" name="name" placeholder="Введите Ваше имя" v-model="name" :class="{invalid:(!$v.name.regname && !$v.name.required && $v.email.$dirty)}"/>
        <span v-if="!$v.name.regname && !$v.name.required && $v.email.$dirty">введите корректное значение</span><br>

        <label for="lname">Еmail</label>
        <input type="text" id="emal" name="email" placeholder="Введите ваш email" v-model="email" :class="{invalid:($v.email.$dirty && !$v.email.required)}"/>
        <span v-if="$v.email.$dirty && !$v.email.required">введите корректное значение</span><br>

        <label for="">Номер телефона</label>
        <input type="text" id="tel" name="tel" placeholder="Введите номер телефона" v-mask="'####-##'" v-model="tel" :class="{invalid:($v.tel.$dirty && !$v.tel.required)}"/>
        <span v-if="$v.tel.$dirty && !$v.tel.required">введите корректное значение </span><br>

        <label for=""> Язык</label>
        <select name="lenguage" id="" v-model="lenguage">
            <option value="leng" v-for="leng in lenguages" >{{leng}}</option>
        </select>
  
        <input type="checkbox" id="ch"   v-model="ch" :class="{invalid:($v.ch.$dirty && !$v.ch.required)}"/>
      <label for="">Принимаю условия использования</label>
        
        <button type="submit"   :disabled="$v.$invalid" >Зарегистрироваться</button>

    </form>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.6/dist/vuelidate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.6/dist/validators.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
  <script>
/*const { required, minLength } = window.validators;*/ /*:class="{invalid:($v.name.$dirty && !$v.name.required)}*/
Vue.use(window.vuelidate.default);
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
const { required,alpha, minLength, email } = window.validators;

new Vue({
	el: "#app",
    data: {
        name: '' ,
        email: '',
        tel: '',
        lenguages: ['en','ru','ua'],
        lenguage:'',
        ch:false

  },
 validations: {
    name: {
     required,
     regname(value) {
        if(value === "") return false;
        return new RegExp('^[a-z\\s-]+$','g').test(value);

}
    },
    email: {
        email,
        required,
 
    },
    tel: {
      required,
      /*minLength: minLength(11)*/
    },
    ch: {
      required
     /* checked(value) {
        return value;       
}*/
   } 
  },
  methods: {
  	submitHandler() {
    if(this.$v.$invalid){
        this.$v.$touch();
        return;
    }
    }
  }
})
  </script>
  
</body>
</html>

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Vue.js

+1 ещё

Средний
Почему ошибки ESLint не подсвечиваются в webstorm?
- 1 подписчик
- 9 часов назад
- 38 просмотров
0

ответов
Vue.js

+1 ещё

Простой
Как преобразовать Ref?
- 1 подписчик
- вчера
- 103 просмотра
1

ответ
Vue.js

Простой
Как исправить ошибки при загрузке страницы, некоторые .js файлы возвращаются с кодом 503, после билда?
- 1 подписчик
- 01 июн.
- 74 просмотра
0

ответов
Vue.js

Простой
Как вычислять значения свойств массива?
- 1 подписчик
- 30 мая
- 101 просмотр
1

ответ
Vue.js

Простой
Почему во Vue 2 теряются значения this.$attrs?
- 1 подписчик
- 21 мая
- 130 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему не подгружаются стили в PrimeVue?
- 1 подписчик
- 13 мая
- 139 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как исправить эту ошибку?
- 1 подписчик
- 30 апр.
- 183 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как работает skipHydrate в pinia?
- 1 подписчик
- 24 апр.
- 167 просмотров
1

ответ
Vue.js

Средний
Как подружить 1 стор Pinia с разными инстансами одного и того же виджета?
- 1 подписчик
- 23 апр.
- 96 просмотров
1

ответ
Vue.js

Простой
Почему Vue не переопределяет значение props-а?
- 1 подписчик
- 22 апр.
- 116 просмотров
1

ответ
Показать ещё Загружается…

Vue frontend разработчик (Senior, remote)

Icons8

от 270 000 ₽

Фронтенд разработчик

Astra Health Tech • Москва

от 250 000 до 300 000 ₽

Junior / Middle Frontend Developer

SubSync

от 90 000 ₽

sergeyviktorovich, Ну а отладку Вы пробовали проводить? Vue dev tools? Смотреть значения параметров в соответствующих computed свойствах? Ошибки есть какие то?
Вадим, я просто смотрел объект this.$v и в нем свойство чекбокc ,оно всегда required true

Почему не работает в vuelidate.js валидация чекбокса?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт