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>

这可能只适合您，无需任何其他更改。但这不是一个非常优雅的解决方案。