dqwh26750 2019-06-03 10:22
浏览 131
已采纳

Jquery验证库没有提交值

I'm trying to make a contact form with jQuery validation library. I want to validate the form and post into a php file & also show response without page loads.

I tried the jQuery with validation library :

Here contact.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 Code : (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:info@themevessel.com">info@themevessel.com</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>

Not showing any validation errors and response. I want to validate the form first and submit into php file and show response.

  • 写回答

1条回答 默认 最新

  • dqx13503925528 2019-06-03 10:30
    关注

    Library issue is one concern.

    $('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:info@themevessel.com">info@themevessel.com</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>

    I changed your validation library with an online link, what you can do is instead of your validation library replace with this <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题