Почему не работает в 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
    }
 }

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

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>

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

Помогут разобраться в теме Все курсы

Skypro

React-разработчик с нуля

9 месяцев

Далее
Skypro

JavaScript-разработчик с нуля

9 месяцев

Далее
Skypro

Frontend-разработчик с нуля

9 месяцев

Далее

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

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

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

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

Vue.js

Простой
Как использовать иконки unicode в vue-fortawesome?
- 1 подписчик
- 08 окт.
- 119 просмотров
2

ответа
Vue.js

Простой
Как сделать модальное окно, которое всегда рядом с кнопкой, его вызывающей?
- 1 подписчик
- 24 сент.
- 141 просмотр
1

ответ
Android

+1 ещё

Средний
Как сделать запрос на Push уведомление для Android в Quasar Caricator?
- 1 подписчик
- 05 сент.
- 91 просмотр
1

ответ
Vue.js

Средний
Как глубоко сравнить копию реактивного объекта и реактивный объект Vue 2?
- 1 подписчик
- 21 авг.
- 154 просмотра
2

ответа
Android

+2 ещё

Сложный
Как в Capacitor приложение обновить через apk?
- 1 подписчик
- 20 авг.
- 126 просмотров
1

ответ
Vue.js

+2 ещё

Простой
Docker, Laravel, Vue — The POST method is not supported for route api/tasks/$%7Bid%7D. Supported methods: PUT, DELETE?
- 1 подписчик
- 09 авг.
- 263 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать код с отменой запросов и переотправкой более простым?
- 1 подписчик
- 05 авг.
- 293 просмотра
2

ответа
Vue.js

Простой
Как подружить Quasar и Motion?
- 1 подписчик
- 02 авг.
- 78 просмотров
1

ответ
Vue.js

+1 ещё

Простой
Как в Nuxt UI добавить собственный цвет для темизации?
- 1 подписчик
- 27 июл.
- 150 просмотров
0

ответов
Vue.js

+1 ещё

Простой
Как правильно писать компоненты-обёртки во Vue 3?
- 1 подписчик
- 25 июл.
- 244 просмотра
3

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

Frontend Developer/ Vue.js

DevTeam.Space • Москва

от 1 000 до 3 000 $

Fullstack разработчик (Laravel + Vue.js/React.js)

Nomadic Soft

от 1 600 до 2 240 $

JS Fullstack Инженер (Node.js + Vue.js)

SteadyControl • Воронеж

от 100 000 до 250 000 ₽

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

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

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

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

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