Question

我想添加JQuery搖動效果的div輸出驗證錯誤通過引導警報。

PHP表單驗證部分

<?php 
$nameErr = $emailErr = $passErr = $cpassErr = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $nameErr = '<div class="alert alert-danger">Name is required !</div>'; 
    } 

    if (empty($_POST["email"])) { 
    $emailErr = '<div class="alert alert-danger">Email is required !</div>'; 
    } 

    if (empty($_POST["pass"])) { 
    $passErr = '<div class="alert alert-danger">Password is required !</div>'; 
    } elseif (!empty($_POST["pass"]) < 6) { 
    $passErr = '<div class="alert alert-danger">Minimum 6 characters required !</div>'; 
    } 

    if (empty($_POST["cpass"])) { 
    $cpassErr = '<div class="alert alert-danger">Confirm password is required !</div>'; 
    } elseif ($_POST["pass"] != $_POST["cpass"]) { 
    $cpassErr = '<div class="alert alert-danger">Password fields do not match !</div>'; 
    } 
} 
?> 

HTML表單

<div class="container-fluid mainbox row"> 
    <h2 style="text-align: center;">Sign Up Form</h2> 
    <div class="container-fluid calbox col-md-4 offset-md-4"> 
    <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
     <div class="form-group"> 
      <label style="padding-top: 10px;" class="col-form-label">Name</label> 
      <input type="text" class="form-control" placeholder="Type your name here" name="name" id="name"> 
      <div class="errBox" style="padding-top: 5px;"> 
       <?php echo $nameErr;?> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-form-label">Email</label> 
      <input type="email" class="form-control" placeholder="Type your email here" name="email" id="email"> 
       <div class="errBox" style="padding-top: 5px;"> 
        <?php echo $emailErr;?> 
       </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-form-label">Phone Number</label> 
      <input type="tel" class="form-control" placeholder="Type your phone number here" name="phone" id="phone"> 
     </div> 
     <div class="form-group"> 
      <label class="col-form-label">Password</label> 
      <input type="password" class="form-control" placeholder="Type a password here" name="pass" id="pass"> 
      <div class="errBox" style="padding-top: 5px;"> 
       <?php echo $passErr;?> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-form-label">Confirm Password</label> 
      <input type="password" class="form-control" placeholder="Retype the password here" name="cpass" id="cpass"> 
      <div class="errBox" style="padding-top: 5px;"> 
       <?php echo $cpassErr;?> 
      </div> 
     </div> 
     <div class="form-group row offset-sm-9" style="padding-left: 10px;"> 
      <button type="submit" class="btn btn-outline-primary" name="btn" value="signup" id="signupbtn">Register</button> 
     </div> 
    </form> 
    </div> 
</div> 

JS

<script> 
    $(document).ready(function() { 
    $("button").click(function() { 
    $(".errBox").effect("shake"); 
    }); 
    }); 
</script> 

所有這些代碼是在一個文件中。正如你所看到的，我將包含div的引導警報類包含在錯誤變量中，並且在html表單中我回顯了錯誤變量，因此包含div的警報類將會彈出。我在另一個div中回顯錯誤變量，並給出了一個名爲errBox的類名。在頁面底部寫了JQuery搖動效果腳本。用戶點擊按鈕後，自舉警報中的錯誤將彈出，但JQuery搖動效果不起作用。

Answer 1

這裏有很多事情正在進行。

1. 當您單擊按鈕時，沒有客戶端驗證，因此該頁面被髮布到服務器。與此同時，errormessage div只在POST驗證時才被設置。所以這裏的div是空的。所以，即使它確實發生了搖晃，它也不會被你看到。

2. 現在服務器驗證數據並設置errormessage div。這次加載頁面時，瀏覽器等待按鈕單擊事件來搖動div。

解決這一應設置在一般情況下，不僅在POST操作的錯誤信息，並添加客戶端驗證。如果驗證失敗，則使錯誤消息div可見並添加抖動效果。可以肯定的是，你也可以保持你的服務器端驗證（如果有人在瀏覽器上關閉javascript，那麼重要）。

現在對於快速的解決方案，你可以嘗試：

<script> 
    $(document).ready(function() { 

     $(".errBox").effect("shake"); 

    }); 
</script> 

這可能只是工作爲你沒有任何其他的變化。但它不是一個非常優雅的解決方案。