Правда или действие

index.html

@@ -31,7 +31,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" id="upload-select-image"  method="post" enctype="multipart/form-data" action="https://32.javascript.htmlacademy.pro/kekstagram" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -235,5 +235,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="js/functions.js"></script>
+    <script src="vendor/pristine/pristine.min.js"></script>
 </body>
 </html>

js/img-upload-form-modal.js

@@ -0,0 +1,57 @@
+import { isValid } from './img-upload-form-validate';
+import { isEscapeKey } from './utils';
+
+const imgUploadform = document.querySelector('.img-upload__form');
+const redactForm = document.querySelector('.img-upload__overlay');
+const imgUploadInput = document.querySelector('.img-upload__input');
+const imgUploadCancelButton = document.querySelector('.img-upload__cancel');
+const fieldComments = document.querySelector('.text__description');
+const fieldHashtag = document.querySelector('.text__hashtags');
+
+
+const openRedactForm = () => {
+  redactForm.classList.remove('hidden');
+  document.body.classList.add('.modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+
+const closeRedactForm = () => {
+  redactForm.classList.add('.hidden');
+  document.body.classList.remove('.modal-open');
+  imgUploadInput.value = '';
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+imgUploadInput.addEventListener('change', () => {
+  openRedactForm();
+});
+
+imgUploadCancelButton.addEventListener('click', () => {
+  closeRedactForm();
+});
+
+function onDocumentKeydown(evt) {
+  if(isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeRedactForm();
+  }
+}
+
+fieldComments.addEventListener('.keydown', (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+fieldHashtag.addEventListener('keydown', (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+imgUploadform.addEventListener('submit', (evt) => {
+  if(!isValid()){
+    evt.preventDefault();
+  }
+});
+

js/img-upload-form-validate.js

@@ -0,0 +1,10 @@
+const orderForm = document.querySelector('.img-upload__form');
+
+const pristine = new Pristine(orderForm, {
+  classTo: 'form__item',
+  errorClass: 'form__item--invalid',
+  successClass: 'form__item--valid',
+  errorTextParent: 'form__item',
+  errorTextTag: 'span',
+  errorTextClass: 'form__error'
+});