时间戳

首页 > 解决方案 > Boostrap 表单验证成功消息未出现

php - Boostrap 表单验证成功消息未出现

问题描述

我正在使用引导表单验证问题是表单提交后没有成功消息我在提交时有一个 PHP 邮件函数脚本我在一个新页面中收到 php 消息 echo 'thank you' 即使我写了return false并且我正在工作在本地 WAMP 服务器上。我的问题是如何在同一页面 HTML 成功消息 div 中获得成功消息。谁能指出我正确的方向？

$(document).ready(function() {
  $('#contact_form').bootstrapValidator({
      // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        first_name: {
          validators: {
            stringLength: {
              min: 2,
            },
            notEmpty: {
              message: 'Please supply your first name'
            }
          }
        },
        last_name: {
          validators: {
            stringLength: {
              min: 2,
            },
            notEmpty: {
              message: 'Please supply your last name'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: 'Please supply your email address'
            },
            emailAddress: {
              message: 'Please supply a valid email address'
            }
          }
        },
        phone: {
          validators: {
            notEmpty: {
              message: 'Please supply your phone number'
            },
            phone: {
              country: 'US',
              message: 'Please supply a vaild phone number with area code'
            }
          }
        },
        address: {
          validators: {
            stringLength: {
              min: 8,
            },
            notEmpty: {
              message: 'Please supply your street address'
            }
          }
        },
        city: {
          validators: {
            stringLength: {
              min: 4,
            },
            notEmpty: {
              message: 'Please supply your city'
            }
          }
        },
        state: {
          validators: {
            notEmpty: {
              message: 'Please select your state'
            }
          }
        },
        zip: {
          validators: {
            notEmpty: {
              message: 'Please supply your zip code'
            },
            zipCode: {
              country: 'US',
              message: 'Please supply a vaild zip code'
            }
          }
        },
        comment: {
          validators: {
            stringLength: {
              min: 10,
              max: 200,
              message: 'Please enter at least 10 characters and no more than 200'
            },
            notEmpty: {
              message: 'Please supply a description of your project'
            }
          }
        }
      }
    })
    .on('success.form.bv', function(e) {
      $('#success_message').slideDown({
        opacity: "show"
      }, "slow") // Do something ...
      $('#contact_form').data('bootstrapValidator').resetForm();

      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);

      // Get the BootstrapValidator instance
      var bv = $form.data('bootstrapValidator');

      // Use Ajax to submit form data
      $.post($form.attr('action'), $form.serialize(), function(result) {
        console.log(result);
      }, 'json');
    });
});
.form-control {
  padding: 0;
}

#success_message {
  display: none;
}

.has-error .help-block {
  color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

<form class="well form-horizontal" action=" " method="post" id="contact_form">

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">First Name</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input name="first_name" placeholder="First Name" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">Last Name</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input name="last_name" placeholder="Last Name" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label">E-Mail</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
      </div>
    </div>
  </div>


  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">Phone #</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
        <input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">Address</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
        <input name="address" placeholder="Address" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">City</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
        <input name="city" placeholder="city" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Select Basic -->

  <div class="form-group">
    <label class="col-md-4 control-label">State</label>
    <div class="col-md-4 selectContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
        <select name="state" class="form-control selectpicker">
          <option value=" ">Please select your state</option>
          <option>Alabama</option>
          <option>Alaska</option>
        </select>
      </div>
    </div>
  </div>

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">Zip Code</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
        <input name="zip" placeholder="Zip Code" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label">Website or domain name</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
        <input name="website" placeholder="Website or domain name" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- radio checks -->
  <div class="form-group">
    <label class="col-md-4 control-label">Do you have hosting?</label>
    <div class="col-md-4">
      <div class="radio">
        <label>
                                    <input type="radio" name="hosting" value="yes" /> Yes
                                </label>
      </div>
      <div class="radio">
        <label>
                                    <input type="radio" name="hosting" value="no" /> No
                                </label>
      </div>
    </div>
  </div>

  <!-- Text area -->

  <div class="form-group">
    <label class="col-md-4 control-label">Project Description</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
        <textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
      </div>
    </div>
  </div>

  <!-- Success message -->
  <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

  <!-- Button -->
  <div class="form-group">
    <label class="col-md-4 control-label"></label>
    <div class="col-md-4">
      <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
    </div>
  </div>

  </fieldset>
</form>

标签： phpjquerytwitter-bootstrapbootstrap-4

解决方案

header("Location: contact_form.php");
您可能必须使用ie重定向回contact_form ；

if( mail( $mail_to, $subject, $msg, $headers )) {
        header("Location: contact_form.php?send=success");
} else {
        die("Error!");
}

注意查询字符串参数send=success

现在，在您的contact_form.php 中，在<form class="well form-horizontal" action=" " method="post" id="contact_form">添加以下条件之前。

    <?php
    $send_status = $_GET['send'];
    if(isset($send_status)){
    ?>
       <style>
          #success_message {
            display: block;
          }
      </style>
    <?
    }
    ?>

试试这个，让我们知道。

推荐阅读