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

这里有很多事情要发生。

单击该按钮时，没有客户端验证，因此页面将发布到服务器。同时，errormessage div仅在POST验证时设置。所以这里的div是空的。所以即使它确实发生了震动，你也看不到它。
现在服务器验证数据并设置errormessage div。这次加载页面时，浏览器会等待按钮点击事件来动摇div。

对此的解决方案通常应设置错误消息，不仅在POST操作中，还要添加客户端验证。如果验证失败，请将错误消息div显示为可见并添加抖动效果。可以肯定的是，您还可以保留服务器端验证（如果有人在浏览器中转换了javascript，则很重要）。

现在，您可以尝试快速解决方案：

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

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

    });
</script>

这可能对您没有任何其他改变。但这不是一个非常优雅的解决方案。

JQuery摇动效果不适用于PHP表单验证

1 个答案: