some changes, 25.08.2022

config.js

@@ -8,6 +8,7 @@ let config = {
     'no-js',
   ],
   'alwaysAddBlocks': [
+    'form-validation',
     // 'sprite-svg',
     // 'sprite-png',
   ],

src/blocks/field-text/field-text.scss

@@ -6,7 +6,7 @@
   $block-name: &; // #{$block-name}__element
 
   display: block;
-  margin-bottom: $typo-margin-vertical;
+  margin-bottom: 20px;
 
   &__name {
     @include field-name;
@@ -14,6 +14,7 @@
 
   &__input-wrap {
     display: block;
+    position: relative;
   }
 
   &__input {
@@ -37,12 +38,14 @@
     #{$block-name}__name,
     #{$block-name}__input,
     #{$block-name}__help-text {
-      color: $color-danger;
     }
 
     #{$block-name}__input {
-      border-color: $color-danger;
-      background-color: lighten($color-danger, 35%);
+      box-shadow: 0 0 0 1px #fff;
+    }
+
+    #{$block-name}__help-text {
+      display: block;
     }
   }
 }

src/blocks/modal/modal.js

@@ -7,46 +7,46 @@ ready(function () {
   const bodyPaddingRightOriginal = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'));
   const backdrop = document.createElement('div');
 
-  document.addEventListener('click', function (event) {
-    const target = event.target.closest('a[data-modal], button[data-modal]');
-
-    if (target && target.dataset.modal === 'open') {
-      showModal( document.getElementById((target.hash || target.dataset.modalTarget).slice(1)) );
+  window.showModal = function (targetModalNode) {
+    if ((document.body.clientHeight - document.documentElement.clientHeight) > 0) {
+      document.body.style.paddingRight = bodyPaddingRightOriginal + getScrollSize() + 'px';
     }
+    document.body.classList.add('modal-open');
 
-    if (target && target.dataset.modal === 'close' || event.target.matches('[aria-modal]')) {
-      closeAllModals();
-    }
+    targetModalNode.classList.add('modal--show');
+    targetModalNode.style.display = 'block';
+    targetModalNode.ariaModal = true;
+    targetModalNode.ariaHidden = null;
+    targetModalNode.setAttribute('role', 'dialog');
 
-    function showModal(targetModalNode) {
-      if ((document.body.clientHeight - document.documentElement.clientHeight) > 0) {
-        document.body.style.paddingRight = bodyPaddingRightOriginal + getScrollSize() + 'px';
-      }
-      document.body.classList.add('modal-open');
+    backdrop.className = 'modal-backdrop';
+    document.body.append(backdrop);
+  }
 
-      targetModalNode.classList.add('modal--show');
-      targetModalNode.style.display = 'block';
-      targetModalNode.ariaModal = true;
-      targetModalNode.ariaHidden = null;
-      targetModalNode.setAttribute('role', 'dialog');
+  window.closeAllModals = function() {
+    document.body.classList.remove('modal-open');
+    document.body.style.paddingRight = '';
 
-      backdrop.className = 'modal-backdrop';
-      document.body.append(backdrop);
-    }
+    document.querySelectorAll('.modal').forEach(function (modal) {
+      modal.classList.remove('modal--show');
+      modal.style.display = 'none';
+      modal.ariaModal = null;
+      modal.ariaHidden = true;
+      modal.removeAttribute('role');
+    });
 
-    function closeAllModals() {
-      document.body.classList.remove('modal-open');
-      document.body.style.paddingRight = '';
+    backdrop.remove();
+  }
 
-      document.querySelectorAll('.modal').forEach(function (modal) {
-        modal.classList.remove('modal--show');
-        modal.style.display = 'none';
-        modal.ariaModal = null;
-        modal.ariaHidden = true;
-        modal.removeAttribute('role');
-      });
+  document.addEventListener('click', function (event) {
+    const target = event.target.closest('a[data-modal], button[data-modal]');
+
+    if (target && target.dataset.modal === 'open') {
+      window.showModal( document.getElementById((target.hash || target.dataset.modalTarget).slice(1)) );
+    }
 
-      backdrop.remove();
+    if (target && target.dataset.modal === 'close' || event.target.matches('[aria-modal]')) {
+      window.closeAllModals();
     }
   });
 

src/blocks/page/page.scss

@@ -759,7 +759,7 @@ pre {
   &__b-item {
     padding-top: 40px;
     border-top: 1px solid #efefef;
-    counter-increment: li 1;
+    counter-increment: li;
 
     @media (min-width: $screen-xl) {
       padding-top: 70px;
@@ -774,12 +774,11 @@ pre {
       margin-top: 40px;
 
       @media (min-width: $screen-xl) {
-        padding-top: 70px;
+        margin-top: 70px;
       }
 
       @media (min-width: $screen-md) {
-        display: flex;
-        padding-top: 50px;
+        margin-top: 50px;
       }
     }
   }
@@ -833,6 +832,7 @@ pre {
     border: 1px solid $color-1;
     border-radius: 8px;
     font-size: 12px;
+    white-space: nowrap;
 
     @media (min-width: $screen-xl) {
       font-size: 20px;
@@ -843,7 +843,7 @@ pre {
     }
 
     &::before {
-      content: "0" counter(li);
+      content: counter(li, decimal-leading-zero);
     }
   }
 
@@ -1039,3 +1039,47 @@ pre {
 .of-h {
   overflow: hidden;
 }
+
+.response-wrapper,
+.response-block {
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity $transition-time, visibility $transition-time;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.response-wrapper {
+  z-index: 10;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.response-block {
+  z-index: 11;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px;
+  border-right: 5px solid transparent;
+  width: 450px;
+  max-width: calc(100% - 30px);
+  background-color: #fff;
+  font: 16px/160% var(--ff);
+  color: #333;
+
+  &.error {
+    border-color: red;
+  }
+
+  &.ok {
+    border-color: limegreen;
+  }
+}

src/pages/index.pug

@@ -98,29 +98,32 @@ block content
         h2.def-title Any questions? <br> Contact us!
 
       .form-block__second
-        form(action="", method="post") 
+        form(action="test-form.php", method="post", data-check-form, data-ajax, data-ok-msg="Форма успешно отправлена", data-error-msg="При отправке формы возникла ошибка, попробуйте перезагрузить страницу и отправить форму ещё раз") 
           +field-text({
-            helpText: 'Подсказка',
+            helpText: 'Only text',
             mods: '',
             attrs: {
               name: 'name',
               placeholder: 'Name',
+              'data-check-pattern': '^[а-яА-Яa-zA-Z]{3,30}$',
             }
           })
           +field-text({
-            helpText: 'Подсказка',
+            helpText: 'Enter e-mail',
             mods: '',
             attrs: {
               name: 'email',
               placeholder: 'E-mail',
+              'data-check-pattern': '^[a-zA-Z0-9.!#$%&\'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$',
             }
           })
           +field-text({
-            helpText: 'Подсказка',
+            helpText: 'Enter phone',
             mods: '',
             attrs: {
               name: 'phone',
               placeholder: 'Phone',
+              'data-check-pattern': '^((8|\\+7|\\+3)[\\- ]?)?(\\(?\\d{3}\\)?[\\- ]?)?[\\d\\- ]{7,15}$',
             }
           })
           +btn('contact us', 'ico')(type="button")

src/scss/mixins/form-mixins.scss

@@ -48,11 +48,12 @@
 }
 
 @mixin field-help-text {
+  position: absolute;
   display: block;
   padding-top: 0.4em;
   font-size: $font-size-sm;
   line-height: 1.2em;
-  color: $text-color-muted;
+  color: #fff;
 
   &:empty {
     // stylelint-disable-line