jQuery Validation - error placement

Question

I\'m trying to use \'errorPlacement\' from jQuery Validation DOCS:

$(\"#myform\").validate({
  errorPlacement: function(error, element) {
           


        

Answer 1

I recommend to use a html template to specify the position and styling like so:

<input name="patient_gender" required>
<label for="patient_gender" class="validation_error_message help-block"></label>

and overwrite function for error placement

$.validator.setDefaults({
    errorPlacement: function(error, element) {
        var name = element.attr('name');
        var errorSelector = '.validation_error_message[for="' + name + '"]';
        var $element = $(errorSelector);
        if ($element.length) { 
            $(errorSelector).html(error.html());
        } else {
            error.insertAfter(element);
        }
    }
});

Answer 2

Just put the part Where you want the error

<label for="[your checkbox id]" generated="true" class="error"></label>

Ex:

<label><input type="checkbox" name="checkbox" id="checkbox" value="1" > Checkbox content</label>
<label for="checkbox" generated="true" class="error"></label>

Answer 3

Since you want to insert the error message before the invalid element, use insertBefore():

errorPlacement: function(error, element) {
    error.insertBefore(element);
}

Answer 4

Another option is...

  errorPlacement: function (error, element) {
    element.before(error);
  }