Using the jQuery Validate plugin, how can I wrap the error message string in a span

Question

Does anyone know how to wrap the inner error string in a span? I\'m using the jQuery Validate plugin for my form and getting the default error message displaying in label tags,

Answer 1

you can define your error message like:

var validator = form.validate({
  rules: {
    username: {
      required: true,
      minlength: 3
    }
  },
  messages: {
    username: {
      required: '<span> required </span>',
      minlength: ''
    }
  },

Answer 2

Use the errorElement option to wrap each item in a span.

Then use the wrapper option to enclose each span within a label

$('#myform').validate({
    errorElement: 'span',
    wrapper: 'label'
    ....

Will give you...

<label><span class="error">This is Required</span></label>

For CSS & jQuery targeting, you don't need a special class as you can select like this...

label > span

OR more specifically...

label > span.error

DEMO: http://jsfiddle.net/s89ommhx/

Answer 3

Use wrapInner .

$('.error').wrapInner( "<span class='youreAwesome'></span>");

As per op comment :

$(".selector").validate({
  invalidHandler: function(event, validator) {
  $('.error').wrapInner( "<span class='youreAwesome'></span>"); 
   }
});

Fiddle