CODEWITHSUNDEEP
jqueryjquery-validate
alvaro.rmfg
alvaro.rmfg

Reputation: 399

jQuery.validate plugin Show a message when there is NO error on a field

I am using jquery.validate plugin to validate a form. I know that error messages can be customized in a easy way but I would like to write and "OK" message whenever a specific input has no errors.

For example, I have a "required" input text and I would like to write a message on the right side saying "This field has been correctly filled" providing that the user has written anything.

Is there anyway to write "OK messages" next to each input field if the data of that input field is OK?

Upvotes: 0

Views: 1125

Answers (1)

A Fader Darkly
A Fader Darkly

Reputation: 3636

There is a demo page here:

http://alittlecode.com/files/jQuery-Validate-Demo/

which shows a tick when a field is valid. The fallback text is OK.

The code in question:

$(document).ready(function(){

 $('#contact-form').validate(
 {
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    subject: {
      minlength: 2,
      required: true
    },
    message: {
      minlength: 2,
      required: true
    }
  },
  highlight: function(label) {
    $(label).closest('.control-group').addClass('error');
  },
  success: function(label) {
    label
      .text('OK!').addClass('valid')
      .closest('.control-group').addClass('success');
  }
 });
}); // end document.ready

This selects the 'control-group' class tag surrounding the input, then applies 'valid' or 'error' as a class to it, depending on the input.

The 'success' callback applies the 'OK' text, but the CSS appears to override it with an image.

Upvotes: 1

Related Questions