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

Вопрос задан 16 февр.
58 просмотров

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

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

Вадим @MrDecoy

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

Написано 16 февр.
sergeyviktorovich @sergeyviktorovich Автор вопроса

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

Написано 16 февр.
Вадим @MrDecoy

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

Написано 16 февр.
sergeyviktorovich @sergeyviktorovich Автор вопроса

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

Написано 16 февр.
Вадим @MrDecoy

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

Написано 16 февр.

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>

Написано 16 февр.

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

Ответы на вопрос 1

Нравится Комментировать

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

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

Войти через центр авторизации

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

JavaScript

+3 ещё

Простой
Как в swiper vue использовать навигацию?
- 1 подписчик
- 17 часов назад
- 42 просмотра
1

ответ
Идентификация пользователей

+2 ещё

Простой
Доступ к куки при разработке с удаленным сервером?
- 1 подписчик
- 22 часа назад
- 34 просмотра
0

ответов
Vue.js

Простой
Как заставить компонент обновиться при изменении query параметра?
- 1 подписчик
- вчера
- 32 просмотра
1

ответ
Vue.js

Простой
Глюк установки даты при ручном вводе?
- 1 подписчик
- вчера
- 24 просмотра
0

ответов
Vue.js

+2 ещё

Средний
Как исправить ошибку при выводе слайдера swiper в Nuxt?
- 1 подписчик
- вчера
- 34 просмотра
1

ответ
Vue.js

Простой
Как скрыть блок в одном компоненте по клику по кнопке в другом компоненте vue?
- 1 подписчик
- вчера
- 42 просмотра
1

ответ
Vue.js

Простой
Как сделать так, чтобы при изменении state, значение не менялось в остальных компонентах, созданных с v-for?
- 1 подписчик
- 05 мар.
- 31 просмотр
0

ответов
CORS

+2 ещё

Простой
Как решить проблему с CORS laravel vue?
- 1 подписчик
- 05 мар.
- 64 просмотра
1

ответ
Vue.js

Средний
Как контролировать последовательность запроса в API?
- 1 подписчик
- 05 мар.
- 56 просмотров
2

ответа
Vue.js

Простой
Как сделать валидацию у формы каждого объекта из массива в Element UI?
- 1 подписчик
- 05 мар.
- 11 просмотров
0

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

Junior Frontend разработчик (Vue)

Junto • Москва

от 50 000 до 70 000 ₽

Senior Frontend разработчик (Vue)

Junto • Москва

от 150 000 ₽

Middle Frontend разработчик (Vue)

Junto • Москва

от 90 000 до 130 000 ₽

Интегрировать верстку на Wordpress

08 мар. 2021, в 12:56

2000 руб./за проект

Десктоп апп на електроне (Win, Linux)

08 мар. 2021, в 12:35

50000 руб./за проект

Битрикс

08 мар. 2021, в 11:59

15000 руб./за проект

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

Answer 1 · 2021-02-16 18:36:13

Поковырял я в общем тоже и чёт с прыжка так сказать не получилось. Выбросил стандартную required от vuelidate и написал свою. Всё работает.

<input type="checkbox" name="ch" v-model="$v.ch.$model" />

data() {
    return {
      ch: false,
    };
},
validations: {
  ch: {
    required: (v) => v,  
  },
},

демка:
https://codesandbox.io/s/eloquent-paper-gcg9b?file...

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

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

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

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