JQuery shake effect doesn't work with php form validation

Question

I am trying to add JQuery shake effect on a div that output validation errors via a bootstrap alert.

PHP form validation part

<?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 form

<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>

All these codes are in a one file. As you can see I assign bootstrap alert class included div to the error variables and in the html form I echo the error variables so the alert class included divs will pop. I echo the error variables in another div and gave a class name called errBox. And at bottom of the page wrote the JQuery shake effect script. After user click the button errors in bootstrap alert will pop but JQuery shake effect doesn't work..

Answer 1

There are a lot of things going on here.

1. When you click the button, there are no client side validation, so the page is posted to the server. Meanwhile the errormessage divs are getting set only on POST validation. So here the divs were empty. So even if it did shake, it was not visible to you.

2. Now the server validates the data and sets the errormessage divs. This time when the page is loaded, the browser waits for the button click event to shake the divs.

The solution to this should be set the error messages in general, not only in POST action and add client side validation. If the validation fails, make the error message divs visible and add the shake effect. Just to be sure, you can also keep your server side validations(important if someone turns of javascript at browser).

Now for quick solution you can try:

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

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

    });
</script>

This might just work out for you without any other change. But it is not a very elegant solution.