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

Средний
Как типизировать массив объектов props так, чтобы он знал, что в объекте есть ключ, имя которого передается в другом prop?
- 1 подписчик
- вчера
- 70 просмотров
0

ответов
Vue.js

+2 ещё

Средний
Vue 2.7 + prerender‑spa‑plugin: почему в Google SERP отображаются i18n‑ключи вместо переведённых строк?
- 1 подписчик
- 03 июл.
- 46 просмотров
0

ответов
Vue.js

Средний
Почему не срабатывает форматирование на самсунговской клавиатуре?
- 1 подписчик
- 02 июл.
- 54 просмотра
0

ответов
Vue.js

+1 ещё

Средний
Почему ошибки ESLint не подсвечиваются в webstorm?
- 1 подписчик
- 01 июл.
- 57 просмотров
1

ответ
Vue.js

+1 ещё

Простой
Как преобразовать Ref?
- 1 подписчик
- 30 июн.
- 116 просмотров
1

ответ
Vue.js

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

ответов
Vue.js

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

ответ
Vue.js

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

ответов
JavaScript

+1 ещё

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

ответов
JavaScript

+3 ещё

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

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

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

Astra Health Tech • Москва

от 250 000 до 300 000 ₽

Frontend-разработчик (Vue.js)

Food Soul • Калининград

от 180 000 ₽

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

Nomadic Soft

от 1 600 до 2 240 $

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

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

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

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

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