cosmopet-architecture/wp-content/themes/cosmopet/static/js/forms.js

/* Start | Module Forms */
// Функция для показа модальных окон
function showModal(modalClass) {


  const modal = document.querySelector('.' + modalClass);
  if (modal) {
    modal.style.display = 'flex';

  }
}
  
  // Функция для закрытия модальных окон
  function closeModals() {
    const modals = document.querySelectorAll('.mform');
    modals.forEach(modal => {
      modal.style.display = 'none';
    });
  }
  
  // Инициализация после загрузки DOM
  document.addEventListener('DOMContentLoaded', function() {
    // Обработчики для кнопок закрытия
    const closeButtons = document.querySelectorAll('.close-button');
    closeButtons.forEach(button => {
      button.addEventListener('click', function() {
        closeModals();
      });
    });
    
    // Закрытие при клике вне контента
    window.addEventListener('click', function(event) {

      const modals = document.querySelectorAll('.mform');
      modals.forEach(modal => {
        if (event.target === modal) {
          modal.style.display = 'none';
        }
      });
    });
  });
  
  // Закрытие при клике вне контента
  window.addEventListener('click', function(event) {
    const modals = document.querySelectorAll('.modal-success, .modal-offer');
    modals.forEach(modal => {
      if (event.target === modal) {
        modal.style.display = 'none';
      }
    });
});



jQuery(document).ready(function($) {
    $('.form-process').submit(function(event) {
        event.preventDefault();
        let validate = validateForm(this);
        if (validate){
            action = $(this).attr('action')
            let formData = $(this).serialize();
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: {
                    action: action,
                    formData: formData
                },
                success: function(response) {
                    closeModals()
                    showModal('mform-success')

                }
            });
        }
    });
});

const metaLocale = document.querySelector('meta[property="og:locale"]');
const localeValue = metaLocale.getAttribute('content');


      // Функция валидации формы
      function validateForm(form) {
          // Очищаем предыдущие сообщения об ошибках внутри этой формы
          clearErrorMessages(form);
          let validated = true
          // Валидация поля имени
          const nameInput = form.querySelector('input[name="name"]');
          
          if (nameInput && !nameInput.value.trim()) {
              if(localeValue == 'en_US'){
                  showError(nameInput, 'The name is requeried field');
              }
              if(localeValue == 'ru_RU'){
                  showError(nameInput, 'Поле имени обязательно для заполнения.');
              }
              validated = false
          }

          // Валидация поля email
          const emailInput = form.querySelector('input[name="email"]');
          const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (emailInput && !emailPattern.test(emailInput.value.trim())) {

              if(localeValue == 'en_US'){
                  showError(emailInput, 'Email is incorrect.');
              }
              if(localeValue == 'ru_RU'){
                  showError(emailInput, 'Введите корректный email.');
              }
              validated = false
          }

          // Валидация поля телефона
          const phoneInput = form.querySelector('input[name="phone"]');
          const phonePattern = /^\+?\d{10,15}$/;
          if (phoneInput && !phonePattern.test(phoneInput.value.trim())) {
              if(localeValue == 'en_US'){
                  showError(phoneInput, 'The phone is incorrect.');
              }
              if(localeValue == 'ru_RU'){
                  showError(phoneInput, 'Введите корректный номер телефона.');
              }
              validated = false
          }
          return validated
      }

      // Функция для отображения сообщения об ошибке
      function showError(input, message) {
          const errorMessage = document.createElement('div');
          errorMessage.className = 'error-message';
          errorMessage.textContent = message;
          input.insertAdjacentElement('afterend', errorMessage);
      }

      // Функция для очистки сообщений об ошибках внутри конкретной формы
      function clearErrorMessages(form) {
          const errorMessages = form.querySelectorAll('.error-message');
          errorMessages.forEach(errorMessage => {
              errorMessage.remove();
          });
      }
/* End | Module Forms */