diff --git a/index.html b/index.html
index e97cccf..5635f4f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <script src="./vendor/pristine/pristine.min.js" defer></script>
   <script src="./js/functions.js" defer></script>
   <script src="./js/main.js" type="module" defer></script>
 
@@ -33,7 +34,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" action="https://31.javascript.htmlacademy.pro/kekstagram" method="post" enctype="multipart/form-data" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -122,7 +123,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                     <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
                   </div>
                   <div class="img-upload__field-wrapper">
-                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
+                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..." maxlength="140"></textarea>
                   </div>
                 </fieldset>
 
diff --git a/js/main.js b/js/main.js
index f3143e9..3ef2337 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,6 @@
 import { photoslist } from './modules/photo-template.js';
 import { displaysPictures } from './modules/photo-template.js';
+import './modules/upload-form.js';
 
 displaysPictures(photoslist);
 
diff --git a/js/modules/upload-form.js b/js/modules/upload-form.js
new file mode 100644
index 0000000..ad2ab44
--- /dev/null
+++ b/js/modules/upload-form.js
@@ -0,0 +1,99 @@
+import { isEscapeKey } from './util';
+
+const HASHTAGS_COUNT = 5;
+const COMMENT_LENGTH = 140;
+const REGEXP = /^#[a-zф-яё0-9]{1,19}$/i;
+
+const errorMessage = {
+  invalidName: 'введён невалидный хэштег',
+  hashtagsLimit: 'превышено количество хэштегов',
+  hashtagsRepeat: 'хэштеги повторяются',
+  commentsLength: 'длина комментария больше 140 символов'
+};
+
+const formUpload = document.querySelector('.img-upload__form');
+const imageUploadInput = formUpload.querySelector('.img-upload__input');
+const imageOverlay = formUpload.querySelector('.img-upload__overlay');
+const imageUploadCancel = formUpload.querySelector('.img-upload__cancel');
+const uploadHashtag = formUpload.querySelector('.text__hashtags');
+const uploadComment = formUpload.querySelector('.text__description');
+
+
+const pristine = new Pristine(formUpload, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextTag: 'div',
+  errorTextClass: 'img-upload__field-wrapper--error'
+});
+
+const onDocumentKeyDown = (evt) => {
+  if(isEscapeKey(evt)){
+    evt.preventDefault();
+    onCloseUploadWindow();
+  }
+};
+
+const onCancleKeyDown = (evt) => {
+  if(isEscapeKey(evt)){
+    evt.stopPropagation();
+  }
+};
+
+const onOpenUploadWindow = () => {
+  imageOverlay.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  uploadHashtag.addEventListener('keydown', onCancleKeyDown);
+  uploadComment.addEventListener('keydown', onCancleKeyDown);
+  document.addEventListener('keydown', onDocumentKeyDown);
+};
+
+function onCloseUploadWindow() {
+  imageUploadInput.value = '';
+  uploadHashtag.value = '';
+  uploadComment.value = '';
+  imageOverlay.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeyDown);
+  uploadHashtag.removeEventListener('focus', onCancleKeyDown);
+  uploadComment.removeEventListener('focus', onCancleKeyDown);
+}
+
+imageUploadInput.addEventListener('change', onOpenUploadWindow);
+
+imageUploadCancel.addEventListener('click', onCloseUploadWindow);
+
+const getHashtagsArray = (element) => {
+  const hashtagsArray = element.toLowerCase().split(/\s+/).filter(Boolean);
+  return hashtagsArray;
+};
+
+const getHashtagsName = (element) => {
+  const hashtagsName = getHashtagsArray(element);
+
+  return hashtagsName.every((hashtag) => REGEXP.test(hashtag));
+};
+
+const getHashtagsCount = (element) => {
+  const hashtagsArray = getHashtagsArray(element);
+  return hashtagsArray.length <= HASHTAGS_COUNT;
+};
+
+const getHashtagsDuplicate = (element) => {
+  const hashtagsArray = getHashtagsArray(element);
+  return new Set(hashtagsArray).size === hashtagsArray.length;
+};
+
+const getCommentLength = (element) => element.length < COMMENT_LENGTH;
+
+
+pristine.addValidator(uploadHashtag, getHashtagsName, errorMessage.invalidName);
+pristine.addValidator(uploadHashtag, getHashtagsCount, errorMessage.hashtagsLimit);
+pristine.addValidator(uploadHashtag, getHashtagsDuplicate, errorMessage.hashtagsRepeat);
+pristine.addValidator(uploadComment, getCommentLength, errorMessage.commentsLength);
+
+formUpload.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  if(pristine.validate()){
+    formUpload.submit();
+  }
+});