How to validate and wrap error message around input?

Question

I use the great jQuery validate plugin on my inputs:

<input type="text" name="name" value="" />

I would like to add this structure (add a div.error around my input and display my error label inside the div), something like this:

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

I've try to play with errorPlacement function but I can't make it.

Answer 1

The jQuery Validate plugin automatically creates and toggles an error message element.

1. You can specify the type of element, such as div, label, etc. using the errorElement option. Default is label.

2. You can specify the placement of this error message element, such as before, after, inside a parent, etc. using various jQuery methods inside the errorPlacement option. Default is "after" the input element.

However, you cannot easily wrap the error message element around the input element. While it's possible to use jQuery to do this within the errorPlacement option, the problem occurs when the error needs to be cleared. The plugin will automatically remove/hide the error message element when the message needs to be cleared and your input element will be removed/hidden along with it.

The solution would be to create the outer div yourself and use the highlight and unhighlight options to toggle the error class on this outer div. You'll have to remember to also include the default code within highlight and unhighlight or the default behavior will be broken. Since your desired class is the default error class, you can simply use the errorClass argument within the highlight and unhighlight options.

Your HTML:

<div>
   <input type="text" name="name" value="" />
</div>

Your .validate() method:

$('#yourForm').validate({
    // rules and options,
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    },
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass); // <- default behavior
        $(element).parent('div').addClass(errorClass); // <- add error class to your parent div
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass); // <- default behavior
        $(element).parent('div').removeClass(errorClass); // <- remove error class from your parent div
    }
});

The end result in the DOM during a validation error:

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

Answer 2

You should play with highlight handler, which allows you to define a way of marking input as invalid:

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
        // or do whatever you want
    }
});

please note that there is also another handler called unhighlight which should be also implemented but in opposite way to first one. Here you have an example of it:

unhighlight: function(element, error, valid){
    $(element).parent("div").removeClass(error); 
    // or do whatever you want but in opposite way
}

Full solution for your problem should looks like this:

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
    },
    unhighlight: function(element, error, valid){
        $(element).parent("div").removeClass(error); 
    }
});

Please note that code above should be included on site preferably after your jquery.validation.js, because it changing default behaviour of jQuery.validator. Advantage of doing it through jQuery.validator.setDefaults is that your configuration will be applied on every single Form on your web site,