Валидация формы pristine.js

Рейтинг: 0Ответов: 2Опубликовано: 28.06.2023

Всем здравствуйте ! Есть проблемы с оформлением валидации формы с помощью Pristine.js! а именно с полем ввода хештегов! Хештег должен начинаться с # и вместе с ним быть не более 20 символов ,не более 5 хештегов в поле ввода, которые разделяются пробелами! Проблема в том , что форма остается не валидной, даже если введены валидные хештеги !

Я в тупике и прошу вашей помощи!

Мой код:

const form = document.querySelector('.img-upload__form');

const pristine = new Pristine(form, {
  classTo: 'form__item', // Элемент, на который будут добавляться классы
  errorClass: 'form__item--invalid', // Класс, обозначающий невалидное поле
  successClass: 'form__item--valid', // Класс, обозначающий валидное поле
  errorTextParent: 'form__item', // Элемент, куда будет выводиться текст с ошибкой
  errorTextTag: 'span', // Тег, который будет обрамлять текст ошибки
  errorTextClass: 'form__error' // Класс для элемента с текстом ошибки
});

const hashtagField = document.querySelector('.text__hashtags'); //поле ввода хештега[![введите сюда описание изображения][1]][1]

const re = /^#[A-Za-zА-Яа-яЁё0-9]{1,19}$/; // регулярное выражение для проверки  валидности введенного хештега
var space = ' '; //способ разделения

function hashtagValidator(value){

  var hashtags = value.split(space);  //разделяем  строку по пробелам
    hashtags.forEach((value) => {
    var reItem = re.test(value); //переберем массив  с проверкой кождого элемента
    console.log(reItem);
    return reItem;
  })
};
pristine.addValidator(hashtagField, hashtagValidator , 'Форма не валидна');

form.addEventListener('submit', (evt) =>{
  evt.preventDefault();
  const isValide = pristine.validate();
  if(isValide){
    console.log('Форма валидна!')
  }else{
    console.log('Форма не валидна!');
  }
})
javascript валидация форма
Источник: Stack Overflow на русском

Ответы

▲ 0

Не забудь привести все входящие значения к единому регистру (чтобы например уникальные исключить). А насчёт forEach. Погляди, что у тебя там применяется на каждый элемент (я про value, лучше все таки ввести туда hashtag, типа он один). И сделаю проверку, если !regex.test(hashtag) то возвращай false, а иначе true

▲ 0
hashtags.forEach(cb) --> .every(cb)

function hashtagValidator(value) { 
  const re = /^#[A-Za-zА-Яа-яЁё0-9]{1,19}$/;   
  const hashtags = value.split(' ');

  return hashtags.every((hashtag) => re.test(hashtag));
}

// 1.нужно чтобы каждый! хэштэг соответствовал шаблону. Если хоть один не соответствует --> 'Форма не валидна'. Нужен .every() 2.В вашем случае функция hashtagValidator ничего совсем не возвращает, return есть только внутри метода forEach, а должен быть обязательно у hashtagValidator