在使用jquery验证失败后,我无法向用户显示特定的表单字段

时间:2017-10-19 17:25:07

标签: php jquery

我需要一些帮助。当用户提交下面的表单并且验证失败时弹出的警报消息不显示所需的名字。它只显示所需的姓氏,但是当我填写姓氏并提交时,它会显示所需的名字。我需要做些什么才能使它们都出现在警报中。代码如下

这是form.php代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top">
  <a class="navbar-brand" href="#">MIT Moonlight Sail</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="moonlightsail.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reservations</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="newreservation_OOP.php">Make a reservation</a>
          <a class="dropdown-item" href="#">Modify a reservation</a>
          <a class="dropdown-item" href="#">Cancel a reservation</a>
        </div>
      </li>
    </ul>
  </div>
</nav>


<div class="card">
    <div class="card-body">
      <p>Welcome to Moonlight Sailing at the <a href="https://sailing.mit.edu" target="_blank">MIT Sailing Pavilion</a>.<br />
    By making a reservation, or using the boats or facilities, you agree to abide by the 
    <a href="https://sailing.mit.edu/info/rules.php" target="_blank">general rules of the MIT Sailing Pavilion</a> and the specific rules of the moonlight sailing available.</p>

  <p><span style="font-weight:bold">Your group may only have one active reservation at a time.</span>  "Active" means waiting waiting to sail or sailing on a boat.  Once you delete your reservation or return from your sail you may make another reservation.</p> 

  <p>To accommodate as many people as possible, we may combine groups and take groups out of order so as to have full boats.</p>
  <p>Enter your reservation details below.<br />

  Upon submission you wil be issued a unique ID number that you can use to update or delete your reservation.<br /></p>


    <form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
      <div class="alert alert-danger  display-error alert-dismissable"   role="alert" style="display: none"> 
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>  
        </button>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <input type="text" class="form-control" id="fname" placeholder="First Name">
        </div>

        <div class="col-md-6 mb-3">
          <input type="text" class="form-control" id="lname" placeholder="Last Name">
        </div>
      </div>


      <div class="form-group">
        <div class="controls">
          <input type="email" class="email form-control"  id="email"   placeholder="Email" >
        </div>
      </div>

      <div class="form-group">
        <div class="controls">
          <input type="text" id="msg_subject" class="form-control" placeholder="Subject" >
        </div>
      </div>

      <div class="form-group">
        <div class="controls">
          <textarea id="message" rows="7" placeholder="Message" class="form-control"></textarea>
        </div>  
      </div>
      <button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Submit Reservation</button>
    </form>
  </div>
</div>




          <!-- Optional JavaScript -->
          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
          <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

          <script type="text/javascript">
          $(document).ready(function() {

            $('#submit').click(function(e) {
              e.preventDefault();

              var fname = $("#fname").val();
              var lname = $("#lname").val();
              var email = $("#email").val();
              var msg_subject = $("#msg_subject").val();
              var message = $("#message").val();


              $.ajax({
                  type: "POST",
                  url: "myformprocess.php",
                  dataType: "json",
                  data: {fname:fname, lname:lname, email:email, msg_subject:msg_subject, message:message},

                  success : function(data){
                      if (data.code == "200"){
                          alert("Success: "+data.msg);

                      } else {

                          $(".display-error").html("<ul>"+data.msg+"</ul>");
                          $(".display-error").css("display","block");

                      }
                  }
              });
            });
        });
      </script>   
  </body>
</html>     

这是PHP验证

<?php

 $errorMSG = "";

/* First NAME */

if (empty($_POST["fname"])) {

$errorMSG = "<li>First Name is required</<li>";

} else {

$fname = $_POST["fname"];

}


/* Last Name */

 if (empty($_POST["lname"])) {

$errorMSG = "<li>Last Name is required</<li>";

} else {

$lname = $_POST["lname"];

} 

/* EMAIL */

if (empty($_POST["email"])) {

$errorMSG .= "<li>Email is required</li>";

} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {



 $errorMSG .= "<li>Invalid email format</li>";

   }else {

    $email = $_POST["email"];

    }



/* MSG SUBJECT */

   if (empty($_POST["msg_subject"])) {

    $errorMSG .= "<li>Subject is required</li>";

   } else {

    $msg_subject = $_POST["msg_subject"];



}


    /* MESSAGE */

    if (empty($_POST["message"])) {

    $errorMSG .= "<li>Message is required</li>";



} else {

  $message = $_POST["message"];

  }


 if(empty($errorMSG)){
$msg = "First Name: ".$fname. ",Last Name: ".$lname. ", Email: 
".$email.", Subject: ".$msg_subject.", Message:".$message;

echo json_encode(['code'=>200, 'msg'=>$msg]);

exit;

}




echo json_encode(['code'=>404, 'msg'=>$errorMSG]);


  ?>

2 个答案:

答案 0 :(得分:0)

你需要改变这个:

import re

pswrd = input("Enter Desired Password:")

if len(pswrd) < 6:
    print("Password must have more than 6 characters.")
if len(pswrd) > 15:
    print("Password must have no more than 15 characters.")
if re.search("[$#@]",pswrd):
    print("Password must have no special characters.")
if not re.search("[0-9]",pswrd):
    print("Password must contain a number.")
if not re.search("[a-z]",pswrd):
    print("Password must contain a lower case letter.")
if not re.search("[A-Z]",pswrd):
    print("Password must contain an upper case letter.")

到此:

$errorMSG = "<li>Last Name is required</<li>";

您已覆盖使用名字所做的更改,而是需要concatenate

答案 1 :(得分:0)

请注意代码之间的区别:

$errorMSG .= "<li>Last Name is required</<li>";

$errorMSG .= "<li>Email is required</li>";

您需要附加,而不是替换错误消息。 &#34;点等于&#34;用于附加到var:

$errorMSG = "<li>Last Name is required</<li>";