ФОРМЫ / Форма с валидацией (в модальном окне)

Заметка создана: 16 марта 2025 г.

Для валидации формы используем скрипт validate.js

$(function() {

var errorTxt = 'Ошибка отправки формы'; //Ошибка отправки формы
$('#form1').validate({
  rules: {
    name: "required",
    phone: "required"
  },
  messages: {
    name: "Заполните это поле", // Заполните это поле
    phone: "Заполните это поле",
  },
  focusInvalid: true,
  errorClass: "input_error",
  submitHandler: function(form){
        var form = document.forms.form1,
        formData = new FormData(form),
        xhr = new XMLHttpRequest();
        xhr.open("POST", "/mform/send-zakazspec.php");
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if(xhr.status == 200) {
            $("#form1").html('<p style="text-align:center">Ваша Заявка отправлена!<p>');
                setTimeout(function(){
                    location.reload();
                    }, 1000);
     
          }
        }
      };
      xhr.send(formData);
    }
    });

     //  Получаем значение из span.title и добавляем в поле формы название выбранной спецтехники
      $('.predzakaz').click(function() {
            var nameg = $(this).parent().children('span.title').text();
            $('#predzakazModal').appendTo('body');//перемещаем по DOM в конец body
            $('input#model').val(nameg);
            $('#model-name').html(nameg);
      });
});

HTML код формы

<div class="modal fade" id="predzakazModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
          <div class="modal-content">
                         <div class="modal-header text-center"><button class="close" type="button" data-dismiss="modal"></button>
                                   <div class="modal-title h3">РемонтССТ </div>
                                    <p class="bold"> Узнать стоимость:  <span id="model-name"></span></p>
                         </div>
                        <div class="box-content">
                                 <form method="get" id="form1">
                                             <div class="text-center mess" id="form_err1"></div>
                                             <div class="text-center mess"  id="form_right1"></div>
                                             <input  name="model"  id="model" type="hidden" />
                                             <input name="name" id="name" maxlength="80" placeholder="Ваше Имя" type="text" />
                                             <input name="phone" id="phone" maxlength="80" placeholder="Телефон *" type="text" required/>


                                            <button type="submit" autocomplete="off" class="btn btn-primary btn-lg btn-circle">Отправить заказ</button>
                            </form>
                 </div>
          </div>
     </div>
</div>

Обработчик отправки формы  send-zakazspec.php

<?php
$to  = "info@site.ru" ;

if ( isset( $_POST['phone'] ) ) {
  $name= substr( $_POST['name'], 0, 40 );
  $phone = substr( $_POST['phone'], 0, 15 );
  $model = substr( $_POST['model'], 0, 250);

  $body = "Имя: ".$name."\r\n";
  $body  .= "Телефон: ".$phone."\r\n";
  $body  .= "Спецтехника: ".$model."\r\n\r\n";

  send_mail($to, $body, $email);
}

// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email)
{
  $subject = 'Пользователь сайта SITE.RU заполнил форму Заказа спецтехники';
  $boundary = "--".md5(uniqid(time())); // генерируем разделитель
  $headers .= "From: ".$email."\r\n";   
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
  $multipart = "--".$boundary."\r\n";
  $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
  $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";


  $body = $body."\r\n\r\n";
  $multipart .= $body;


  mail($to, $subject, $multipart, $headers);
}
?>