Правда или действие (тестовая версия)

index.html

@@ -30,7 +30,7 @@ <h2 class="pictures__title  visually-hidden">Фотографии других 
       <section class="img-upload">
         <div class="img-upload__wrapper">
           <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
-          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+          <form class="img-upload__form" action="https://31.javascript.htmlacademy.pro/kekstagram" method="POST" enctype="multipart/form-data" id="upload-select-image" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -233,6 +233,7 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
+    <script src="vendor/pristine/pristine.min.js"></script>
     <script src="js/main.js" type="module"></script>
 </body>
 </html>

js/form.js

@@ -0,0 +1,126 @@
+import {isEscapeKey} from './util';
+
+const bodyElement = document.body;
+const imgUploadForm = document.querySelector('.img-upload__form');
+const imgUploadInput = imgUploadForm.querySelector('.img-upload__input');
+const imgUploadOverlay = imgUploadForm.querySelector('.img-upload__overlay');
+const buttonUploadCancel = imgUploadForm.querySelector('.img-upload__cancel');
+const hashtag = imgUploadForm.querySelector('.text__hashtags');
+const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/;
+
+const pristine = new Pristine(imgUploadForm, {
+  classTo: 'img-upload__field-wrapper',
+  errorClass: 'form__item--invalid',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextTag: 'div',
+  errorTextClass: '.img-upload__field-wrapper--error'
+  //text-error как errorTextClass?
+});
+
+//Проверка длины комментария
+function validateTextDescription (value) {
+  return value.length >= 0 && value.length <= 140;
+}
+pristine.addValidator(imgUploadForm.querySelector('.text__description'), validateTextDescription, 'Длина комментария больше 140 символов');
+
+//Проверка валиден ли хэштег регуляркой
+function validateHashtag (value) {
+  //Тут надо реализовать проверку, на пустоту поля после орезки пробелов trim();
+  if (value.includes(' #')) {
+    const values = value.split(' ');
+    const checkedValues = [];
+    values.forEach((item) => {
+      const checkedValue = hashtagRegex.test(item.toLowerCase());
+      checkedValues.push(checkedValue);
+    });
+
+    const isVal = !checkedValues.includes(false);
+    return isVal;
+  } else {
+    return value.length === 0 || hashtagRegex.test(value.toLowerCase());
+  }
+}
+
+pristine.addValidator(hashtag, validateHashtag, 'Введён невалидный хэштег');
+
+//Проверка не более 5 хэштегов
+function validateHashtagCount (value) {
+  if (value.includes(' #')) {
+    const maxCount = 5;
+    const values = value.split(' ');
+    const checkedValues = [];
+    values.forEach((item) => {
+      checkedValues.push(item);
+    });
+
+    return checkedValues.length <= maxCount;
+  } else {
+    return true;
+  }
+}
+
+pristine.addValidator(hashtag, validateHashtagCount, 'Превышено количество хэштегов');
+
+//Проверка на повтор хэштегов
+function validateHashtagRepeat (value) {
+  if (value.includes(' #')) {
+    const values = value.split(' ');
+    const checkedValues = [];
+    values.forEach((item) => {
+      const checkedValue = item.toLowerCase().replace(/#/, '');
+      checkedValues.push(checkedValue);
+    });
+    const duplicates = checkedValues.filter((number, index, numbers) => {
+      return numbers.indexOf(number) !== index;
+    });
+    return duplicates.length === 0;
+  } else {
+    return true;
+  }
+}
+
+pristine.addValidator(hashtag, validateHashtagRepeat, 'Хэштеги повторяются');
+
+
+imgUploadForm.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  const isValid = pristine.validate();
+  if (isValid) {
+    evt.target.submit();
+  }
+});
+
+///Доделать - выделить в функции
+imgUploadInput.addEventListener('change', () => {
+  openUploadForm();
+});
+
+buttonUploadCancel.addEventListener('click', () => {
+  closeUploadForm();
+});
+
+const onDocumentKeydown = (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.preventDefault();
+    //добпать stopprop по условию
+    closeUploadForm();
+  }
+};
+
+//Открытие формы загрузки
+const openUploadForm = () => {
+  imgUploadOverlay.classList.remove('hidden');
+  bodyElement.classList.add('modal-open');
+  //добавить обработчики по клику и keydown
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+
+//Закрытие формы загрузки
+function closeUploadForm() {
+  imgUploadOverlay.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  //добавить удаление обработчиков
+  imgUploadInput.value = '';
+}
+

js/main.js

@@ -1,6 +1,7 @@
 import {createPosts} from './data.js';
 import {createFragment} from './thumbnails.js';
 import {renderModal} from './modal.js';
+import './form.js';
 
 
 const posts = createPosts();

vendor/nouislider/nouislider.js

@@ -105,7 +105,7 @@
           el.classList.remove(className);
       }
       else {
-          el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
+          el.className = el.className.replace(new RegExp("(^|\\b)" + className.(" ").join("|") + "(\\b|$)", "gi"), " ");
       }
   }
   // https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/
@@ -1330,7 +1330,7 @@
           };
           var methods = [];
           // Bind a closure on the target for every event type.
-          events.split(" ").forEach(function (eventName) {
+          events.(" ").forEach(function (eventName) {
               element.addEventListener(eventName, method, supportsPassive ? { passive: true } : false);
               methods.push([eventName, method]);
           });