jquery - 如何为 jquery 验证错误消息设置动画并突出显示该字段？

Question

我有一个使用 jquery 验证的登录页面，并且正在使用插件 animate.style 进行 css 动画。

我试图让表单字段输入框突出显示，错误消息淡入并出现在文本字段下方。但是，我拼凑的代码非常有问题，我相信可以改进。

由于输入框是包含图标的合并字段，因此我不确定我是否定位正确。

我的表单代码如下所示：

            <form class="js-validation-signin" action="login_check.php" method="post" name="loginform" id="loginform">
            
            
            <div class="form-group">
                <label class="text-label" for="username">Username:</label>
                <div class="input-group input-group-merge">
                    <input name="username" id="username" type="text" class="form-control form-control-prepended"
                           placeholder="Enter your username">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <span class="fa fa-user-alt"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="text-label" for="password_2">Password:</label>
                <div class="input-group input-group-merge">
                    <input name="password" id="password" type="password" class="form-control form-control-prepended"
                           placeholder="Enter your password">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <span class="fa fa-key"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="Sign In" class="btn btn-primary btn-block" name="submit">
            </div>

我使用的验证码是：

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='loginform']").validate({
    // Specify validation rules
    errorClass: "invalid-feedback is-invalid",
    validClass: "is-valid",
    errorElement: "div",
    errorPlacement: function(error, element) {
        //error.appendTo( element.closest(".form-group"));
        jQuery(element).parents(".form-group > div").append(error)
      },
    highlight: function(element) {
        $(element).fadeOut(function() {
          $(element).fadeIn();
          $(element).addClass("is-invalid");
        });
      },

    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      username: "required",
      password: "required"
    },
    // Specify validation error messages
    messages: {
      username: "Please enter your username",
      password: "Please enter your password",
      url: "Please enter a url"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

非常感谢帮助！

标签： jqueryjquery-validate