Question

我目前正在处理登录表单，并尝试开发在验证未在客户端传递时我需要它执行的功能。

这是我在验证登录表单之前呈现的当前HTML。我想在div类输入组之后放置错误。它仍然将它放在表单控件之后。

<div class="input-group mb15">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" class="form-control" placeholder="Email Address" name="email_address">
</div><!-- input-group -->
<div class="input-group mb15">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input type="password" class="form-control" placeholder="Password" name="password">
</div><!-- input-group -->

jQuery验证过程

$("#login-form").validate({      
    highlight: function(element) {
        $(element).closest('.input-group').removeClass('has-success').addClass('has-error');
    },
    errorPlacement: function(error, element) {
        error.appendTo(element.parent('.input-group'));
    }      
});

Answer 1

该插件会创建然后自动切换错误label，因此请勿使用appendTo()。此外，append正在追加label 中的div ，这会将其置于与原来相同的位置，就在input之后1}}元素。

只需保留默认insertAfter()并调整jQuery选择器。

errorPlacement: function(error, element) { error.insertAfter(element.parent('.input-group')); }

如果您发现任何CSS问题，那么可能与使用unhighlight时未能实施highlight回调函数有关。

$("#login-form").validate({ highlight: function(element) { $(element).closest('.input-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.input-group').addClass('has-success').removeClass('has-error'); }, errorPlacement: function(error, element) { error.insertAfter(element.parent('.input-group')); } });

带有错误放置的jQuery验证

1 个答案: