通过Php验证后，Bootstrap Modal弹出窗口

Question

I want to pop up the Bootstrap modal in case of some validation error occur and display it on the modal. Php validation occur after page reload so in case of error occur, bootstrap modal should pop up with respective errors.

This the code for modal.

    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3><span class="glyphicon glyphicon-lock"></span> Login</h3>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="u_email" name="u_email" value="<?php echo $u_email;?>" placeholder="Enter email">
              <span class="error"> <?php echo $u_emailErr;?></span>
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="password" name="password" value="<?php echo $password;?>" placeholder="Enter password">
              <span class="error"> <?php echo $passwordErr; echo $count;?></span>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-off"></span> Login</button>
         </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#myModal1" data-backdrop="static" >Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>



    </div>
  </div>

Php This is php validation.

<?php
// define variables and set to empty values
$u_emailErr = $passwordErr = "";
$u_email = $password = "";
$count = 0;

if ($_SERVER["REQUEST_METHOD"] == "POST") 
{  
   if (empty($_POST["u_email"]))
    {
     $u_emailErr = "Email is required";
     $count++;
    } 
   else 
   {
     $u_emailErr = test_input($_POST["u_email"]);
     // check if e-mail address is well-formed
     if (!filter_var($u_email, FILTER_VALIDATE_EMAIL)) 
     {
       $u_emailErr = "Invalid email format"; 
       $count++;
     }
   }

   if (empty($_POST["password"])) 
   {
     $passwordErr = "Password is required";
     $count++;
   } 
   else 
   {
     $passwordErr = test_input($_POST["u_email"]);

   } 
}

function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
?>  

Anyone can help...........?

Answer 1

you have to add below code in invalid condition

else {
    echo "<script type='text/javascript'>
    $(document).ready(function(){
    $('.modal-dialog').modal('show');
    });
    </script>";
    }