Здравствуйте, не получается правильно написать валидацию хэштегов
Кастомное сообщение при переборе массива, срабатывает всегда на разных элементах(хэштеге). Я не могу уследить закономерность из-за чего это происходит. После исправления такого хештега, следующей проблемой может стать(а может и нет) отправка формы, несмотря на проблемы с валидацией в остальных хэштегах. Кажется, что при нажатии на сабмит, мы кажый раз должны получить значение с хэштегами, в виде строки. Дальше поместив хэштеги в массив, каждый элемент должен пройти валидацию, но на деле, всегда по разному. Если можно объяснить, из-за чего происходит пропуск некоторых элементов. Еще одна проблема, в том , что событие blur, при использовании кастомного сообщения, работает корректно, только пр клике по сабмиту, а не скажем при переходе на соседнее поле. Хотя если касотмное сообщение заменить на alert, срабатывает при любой потере фокуса.
'use strict';
(function() {
var HASHTAG_FIELD = document.querySelector('.text__hashtags');
var SUBMIT = document.querySelector('#submit');
SUBMIT.addEventListener('click', function(evt) {
evt.preventDefault();
var t = HASHTAG_FIELD.value;
let delSymb = t.replace(/[#' ']/g, '');
let reg = new RegExp(/\w#/g);
let idx = [];
let nAr = [];
console.log(reg.test(t));
var a = t.split('');
a.forEach((v, i) => {
if (v === '#') {
idx.push(i);
}
})
for (var i = 0; i < idx.length; i++) nAr.push(t.slice(idx[i], idx[i + 1]));
var f = (v) => {
var n;
n = v.split().splice(v.length - 1, 1)
return n;
}
console.log(nAr);
nAr.forEach(h => reg.test(t) === true ?
HASHTAG_FIELD.setCustomValidity('there must been the spacetrailling between hashtags') :
h.length > 20 ? HASHTAG_FIELD.setCustomValidity('hashtag must be less then 20 symbols') :
nAr.length > 5 ? HASHTAG_FIELD.setCustomValidity('you have 5 hashtags limit') :
delSymb.search(/\W/) !== -1 ? HASHTAG_FIELD.setCustomValidity('хэштег может состоять только из букв и цифр и не должен содержать символов') :
HASHTAG_FIELD.setCustomValidity(''));
})
}())<form id='form'>
<fieldset class="">
<input type="text" class="text__hashtags" name="" placeholder="#хэш-тег">
<textarea class="text__description" name="" placeholder="Ваш комментарий..."></textarea>
</fieldset>
<button id="submit">Опубликовать</button>
</form>