jQuery Validation with Error Placement

Question

I'm currently working on login form and trying to develop the functionality I need it to do when the validation does not pass on the client side.

This is the current HTML I have that is rendered before the login form is validated. I'm wanting to place the error after the div class input-group. It is still placing it after the form-control instead.

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

$("#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'));
    }      
});

Sparky · Accepted Answer · 2014-10-21 18:32:11Z

0

The plugin creates and then automatically toggles the error label, so don't use appendTo() for this. Also your append is appending the label inside of the div, which puts it in the same exact place it would have been originally, just after the input element.

Simply keep the default insertAfter() and adjust the jQuery selector.

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

If you're seeing any CSS issues, then it's likely related to a failure to implement the unhighlight callback function when using 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'));
    }      
});

edited Oct 21, 2014 at 18:32

answered Oct 21, 2014 at 17:08

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user3732216 Over a year ago

The only issue with this is that it takes away from the default css for the error. Should I just add the css to the end of the line or should I deal with it in another faction.

Sparky Over a year ago

@user3732216, not sure what you mean by "take away the default css". The errorPlacement callback only affects where the error element is placed. The default CSS for the error is still applied on the element and on the message.

Sparky Over a year ago

@user3732216, BTW, I see you're using the highlight callback function. Most typically, you would then also need to implement the unhighlight callback function to do the exact opposite.

user3732216 Over a year ago

If I add the the unhighlight and remove the .css('color', '#a94442'). It will not make the message text right.

Sparky Over a year ago

@user3732216, You typically would not remove a specific color... just add/remove the class(es) you removed/added with highlight. Did you follow the revised code in my edited answer?

|

Collectives™ on Stack Overflow

jQuery Validation with Error Placement

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related