javascript - JQuery 摇动效果不适用于 php 表单验证

Question

我正在尝试在 div 上添加 JQuery shake 效果，通过 Bootstrap 警报输出验证错误。

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>

所有这些代码都在一个文件中。正如您所看到的，我将 Bootstrap 警报类包含的 div 分配给错误变量，并在 html 表单中回显错误变量，以便包含警报类的 div 将弹出。我在另一个 div 中回显错误变量，并给出了一个名为 errBox 的类名。并在页面底部编写了JQuery摇动效果脚本。用户单击按钮后，将弹出 Bootstrap 警报中的错误，但 JQuery 摇动效果不起作用..

Answer 1

这里发生了很多事情。

1. 当您单击该按钮时，没有客户端验证，因此页面将发布到服务器。同时，错误消息 div 仅在 POST 验证时设置。所以这里的 div 是空的。所以即使它确实晃动了，你也看不到它。

2. 现在服务器验证数据并设置错误消息 div。这次当页面加载时，浏览器等待按钮单击事件来摇动 div。

解决这个问题的方法应该是设置一般的错误消息，而不仅仅是在 POST 操作中并添加客户端验证。如果验证失败，则使错误消息div可见并添加摇动效果。可以肯定的是，您还可以保留服务器端验证(如果有人在浏览器中关闭 JavaScript，这一点很重要)。

现在要获得快速解决方案，您可以尝试:

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

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

    });
</script>

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