JQuery 抖動效果不適用於 php 表單驗證

Question

我正在嘗試在通過引導程序警報輸出驗證錯誤的 div 上添加 JQuery 抖動效果。

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. 當您單擊該按鈕時，沒有客戶端驗證，因此頁面被發布到服務器。 同時，錯誤消息 div 僅在 POST 驗證時設置。 所以這里的div是空的。 因此，即使它確實震動了，您也看不到。

2. 現在服務器驗證數據並設置錯誤消息 div。 這一次頁面加載完畢，瀏覽器等待按鈕點擊事件晃動div。

對此的解決方案應該是設置錯誤消息，而不僅僅是在 POST 操作中添加客戶端驗證。 如果驗證失敗，使錯誤信息div可見並添加抖動效果。 可以肯定的是，您還可以保留服務器端驗證（如果有人在瀏覽器中使用 javascript，這一點很重要）。

現在，您可以嘗試快速解決方案：

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

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

    });
</script>

這可能適合您，無需任何其他更改。 但這不是一個非常優雅的解決方案。