Библиотека проверки Jquery не отправляет значения

Я пытаюсь создать контактную форму с библиотекой проверки jQuery. Я хочу проверить форму и опубликовать ее в файле php, а также показать ответ без загрузки страницы.

Я попробовал jQuery с библиотекой проверки:

Здесь контакт.js

$('document').ready(function() {
    /* handling form validation */
    $("#contact-form").validate({
        rules: {
            full-name: "required",
            email: {
                required: true,
                email: true
            },
            subject: "required",

                phone: {
                required: true,
                digits: true
            },

            message: {
                required: true,
                minlength: 10,
                maxlength: 2000
            },
        },
        messages: {
            full-name:{
              required: "please enter your full name."

             },
            email:{

            required: "please enter your email address",
            email: "Please enter a valid email address"

        },
        subject: "Please enter a subject",
        phone: {
            required: "Please enter your phone number",
            digits: "Please enter a valid phone number"

            },
        message: "Please enter your message",

        },
        submitHandler: submitForm
    });
    /* Handling login functionality */
    function submitForm() {
        var data = $("#contact-form").serialize();
        $.ajax({
            type : 'POST',
            url  : 'process_contact.php',
            data : data,
            beforeSend: function(){
                $("#notification").fadeOut();
                $("#submit-button").html('<span class = "glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
            },
            success : function(response){
                if (response= = "ok"){
                    $("#submit-button").html('&nbsp; Sending ...');
                    //setTimeout(' window.location.href = "dashboard.php"; ',4000);
                } else {
                    $("#notification").fadeIn(1000, function(){
                        $("#notification").html('<div class = "alert alert-danger"> <span class = "glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
                        $("#submit-button").html('&nbsp; Send');
                    });
                }
            }
        });
        return false;
    }
});

HTML-код: (contact.html)

<!DOCTYPE html>
<html lang = "zxx">
<head>
<title>The Nest - Real Estate HTML Template</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset = "utf-8">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src = "js/validation.min.js"></script>
<script src = "js/contact.js"></script>
<!-- Custom stylesheet -->
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<link rel = "stylesheet" type = "text/css" id = "style_sheet" href = "css/skins/default.css">
</head>
<body>


  <div class = "contact-1 content-area-7">
      <div class = "container">
          <div class = "main-title">
              <h1>Contact Us</h1>
          </div>
          <div id = "notification" class = "notification-box"></div>

          <div class = "row">
              <div class = "col-lg-7 col-md-7 col-sm-6 col-xs-12">
                  <!-- Contact form start -->
                  <div class = "contact-form">
                      <form id = "contact-form" method = "post" name = "contact-form">
                          <div class = "row">
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group fullname">
                                      <input type = "text" name = "full-name" class = "input-text" id = "full-name" placeholder = "Full Name">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group enter-email">
                                      <input type = "email" name = "email" class = "input-text" id = "email" placeholder = "Enter email">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group subject">
                                      <input type = "text" name = "subject" class = "input-text" id = "subject" placeholder = "Subject">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group number">
                                      <input type = "text" name = "phone" class = "input-text" id = "phone" placeholder = "Phone Number">
                                  </div>
                              </div>
                              <div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
                                  <div class = "form-group message">
                                      <textarea class = "input-text" name = "message" id = "button" placeholder = "Write message"></textarea>
                                  </div>
                              </div>
                              <div class = "col-lg-12 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group send-btn mb-0">
                                      <button type = "submit" id = "submit-button" class = "button-md button-theme">Send Message</button>
                                  </div>
                              </div>
                          </div>
                      </form>
                  </div>
                  <!-- Contact form end -->
              </div>
              <div class = "col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
                  <!-- Contact details start -->
                  <div class = "contact-details">
                      <div class = "main-title-2">
                          <h3>Our Address</h3>
                      </div>
                      <div class = "media">
                          <div class = "media-left">
                              <i class = "fa fa-map-marker"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Office Address</h4>
                              <p>Vierra Property Broker
  Office 714, Le Solarium, Dubai, United Arab Emirates</p>
                          </div>
                      </div>
                      <div class = "media">
                          <div class = "media-left">
                              <i class = "fa fa-phone"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Phone Number</h4>
                              <p>
                                  <a href = "tel:0477-0477-8556-552">office: 0477 8556 552</a>
                              </p>
                              <p>
                                  <a href = "tel:+55-417-634-7071">Mobile: +55 417 634 7071</a>
                              </p>
                          </div>
                      </div>
                      <div class = "media mb-0">
                          <div class = "media-left">
                              <i class = "fa fa-envelope"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Email Address</h4>
                              <p>
                                  <a href = "mailto:[email protected]">[email protected]</a>
                              </p>
                              <p>
                                  <a href = "http://themevessel.com" target = "_blank">http://themevessel.com</a>
                              </p>
                          </div>
                      </div>
                  </div>
                  <!-- Contact details end -->
              </div>
          </div>
      </div>
  </div>
</body>
</html>

Не показывает никаких ошибок проверки и ответа. Я хочу сначала проверить форму и отправить ее в файл php и показать ответ.

Используйте кавычки для этого полного имени, например «полное имя».

— 03.06.2019 12:23

только для полного имени, верно? Да, я давал и пробовал, но все та же проблема

— 03.06.2019 12:25

в блоке сообщений тоже дал?

— 03.06.2019 12:25

да.. только за это полное имя правильно. Я дал в обоих блоках правила и сообщения

— 03.06.2019 12:28

Один раз проверьте мое исправление в ответе.

— 03.06.2019 12:31

Это сработало !, в чем проблема ?, можете ли вы просто объяснить, что

— 03.06.2019 12:38

php jquery html forms validation

03.06.2019 12:22

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема с библиотекой — одна из проблем.

$('document').ready(function() {
    /* handling form validation */
    $("#contact-form").validate({
        rules: {
            'full-name': "required",
            email: {
                required: true,
                email: true
            },
            subject: "required",

                phone: {
                required: true,
                digits: true
            },

            message: {
                required: true,
                minlength: 10,
                maxlength: 2000
            },
        },
        messages: {
            'full-name':{
              required: "please enter your full name."

             },
            email:{

            required: "please enter your email address",
            email: "Please enter a valid email address"

        },
        subject: "Please enter a subject",
        phone: {
            required: "Please enter your phone number",
            digits: "Please enter a valid phone number"

            },
        message: "Please enter your message",

        },
        submitHandler: submitForm
    });
    /* Handling login functionality */
    function submitForm() {
        var data = $("#contact-form").serialize();
        $.ajax({
            type : 'POST',
            url  : 'process_contact.php',
            data : data,
            beforeSend: function(){
                $("#notification").fadeOut();
                $("#submit-button").html('<span class = "glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
            },
            success : function(response){
                if (response= = "ok"){
                    $("#submit-button").html('&nbsp; Sending ...');
                    //setTimeout(' window.location.href = "dashboard.php"; ',4000);
                } else {
                    $("#notification").fadeIn(1000, function(){
                        $("#notification").html('<div class = "alert alert-danger"> <span class = "glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
                        $("#submit-button").html('&nbsp; Send');
                    });
                }
            }
        });
        return false;
    }
});

<!DOCTYPE html>
<html lang = "zxx">
<head>
<title>The Nest - Real Estate HTML Template</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset = "utf-8">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<!-- Custom stylesheet -->
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<link rel = "stylesheet" type = "text/css" id = "style_sheet" href = "css/skins/default.css">
</head>
<body>


  <div class = "contact-1 content-area-7">
      <div class = "container">
          <div class = "main-title">
              <h1>Contact Us</h1>
          </div>
          <div id = "notification" class = "notification-box"></div>

          <div class = "row">
              <div class = "col-lg-7 col-md-7 col-sm-6 col-xs-12">
                  <!-- Contact form start -->
                  <div class = "contact-form">
                      <form id = "contact-form" method = "post" name = "contact-form">
                          <div class = "row">
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group fullname">
                                      <input type = "text" name = "full-name" class = "input-text" id = "full-name" placeholder = "Full Name">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group enter-email">
                                      <input type = "email" name = "email" class = "input-text" id = "email" placeholder = "Enter email">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group subject">
                                      <input type = "text" name = "subject" class = "input-text" id = "subject" placeholder = "Subject">
                                  </div>
                              </div>
                              <div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group number">
                                      <input type = "text" name = "phone" class = "input-text" id = "phone" placeholder = "Phone Number">
                                  </div>
                              </div>
                              <div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
                                  <div class = "form-group message">
                                      <textarea class = "input-text" name = "message" id = "button" placeholder = "Write message"></textarea>
                                  </div>
                              </div>
                              <div class = "col-lg-12 col-md-6 col-sm-12 col-xs-12">
                                  <div class = "form-group send-btn mb-0">
                                      <button type = "submit" id = "submit-button" class = "button-md button-theme">Send Message</button>
                                  </div>
                              </div>
                          </div>
                      </form>
                  </div>
                  <!-- Contact form end -->
              </div>
              <div class = "col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-6 col-xs-12">
                  <!-- Contact details start -->
                  <div class = "contact-details">
                      <div class = "main-title-2">
                          <h3>Our Address</h3>
                      </div>
                      <div class = "media">
                          <div class = "media-left">
                              <i class = "fa fa-map-marker"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Office Address</h4>
                              <p>Vierra Property Broker
  Office 714, Le Solarium, Dubai, United Arab Emirates</p>
                          </div>
                      </div>
                      <div class = "media">
                          <div class = "media-left">
                              <i class = "fa fa-phone"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Phone Number</h4>
                              <p>
                                  <a href = "tel:0477-0477-8556-552">office: 0477 8556 552</a>
                              </p>
                              <p>
                                  <a href = "tel:+55-417-634-7071">Mobile: +55 417 634 7071</a>
                              </p>
                          </div>
                      </div>
                      <div class = "media mb-0">
                          <div class = "media-left">
                              <i class = "fa fa-envelope"></i>
                          </div>
                          <div class = "media-body">
                              <h4>Email Address</h4>
                              <p>
                                  <a href = "mailto:[email protected]">[email protected]</a>
                              </p>
                              <p>
                                  <a href = "http://themevessel.com" target = "_blank">http://themevessel.com</a>
                              </p>
                          </div>
                      </div>
                  </div>
                  <!-- Contact details end -->
              </div>
          </div>
      </div>
  </div>
</body>
</html>

Я изменил вашу библиотеку проверки с помощью онлайн-ссылки, что вы можете сделать, это заменить вашу библиотеку проверки на эту <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

03.06.2019 12:30

Другие вопросы по теме

AngularJS получает проанализированный HTML

JQuery .each() - Получение текста значений массива

Как получить данные xml из URL-адреса с помощью метода GET

Кнопки файлов Wordpress Gutenberg - как отобразить первым?

Скрытие Divtag с помощью jquery

Как проверить, выбраны ли параметры выбора или оба

Amcharts разный цвет одного и того же столбца в xycharts

Как получить весь формат ввода даты в таблице с помощью javascript?

Если выбрана дата, скрыть значок

500 Внутренняя ошибка сервера при использовании Ajax в Laravel

Библиотека проверки Jquery не отправляет значения

Ответы 1

Другие вопросы по теме

Похожие вопросы