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

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

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 ещё

Простой
При установке vuejs выходят ошибки, как исправить?
- 1 подписчик
- 18 часов назад
- 74 просмотра
0

ответов
Vue.js

+1 ещё

Простой
Как решить ошибку globalThis is not defined в PyQt5: QWebEngineView?
- 1 подписчик
- 21 час назад
- 14 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как правильно задеплоить сайт на firebase hosting в бесплатном плане?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
Vue.js

Простой
Есть ли рекомендуемый порядок следования атрибутов во vue?
- 1 подписчик
- вчера
- 65 просмотров
2

ответа
Vue.js

Простой
Как переместить колонку с checkbox вправо, в компоненте QTable, Quasar?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
Vue.js

Средний
Как протестировать vue компонент на открытие модального окна через vitest?
- 1 подписчик
- 05 мая
- 36 просмотров
1

ответ
Node.js

+4 ещё

Средний
Как решить ошибку MaxListenersExceededWarning в Докере во время RUN npm install?
- 1 подписчик
- 03 мая
- 51 просмотр
2

ответа
Vue.js

Средний
Как исправить ошибки TypeError и getActivePinia() при тестировании в vitest?
- 1 подписчик
- 03 мая
- 26 просмотров
1

ответ
Vue.js

Средний
Есть ли способ запустить vite/vue приложение без сервера?
- 1 подписчик
- 02 мая
- 109 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как переназначить значение null в объект с явной структурой в TS Vue?
- 1 подписчик
- 01 мая
- 78 просмотров
1

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

Frontend-разработчик VUE (Senior, Middle+)

SOFT DIVISION • Ярославль

от 150 000 до 300 000 ₽

Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)

Donatov.net

от 100 000 до 300 000 ₽

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Доработка и визуализация 3D проекта помещения

08 мая 2024, в 14:43

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

Часовая консультация по WordPress

08 мая 2024, в 14:23

1500 руб./в час

Создать расширение или локально исполняемый файл для заполнение сайта

08 мая 2024, в 14:17

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

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

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

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

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

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