July 20, 2010

How to mark required field in jQuery Validate

Question by Henning

I’m using jQuery Validate and xVal to validate in input forms. This works great.
However, I do want to mark my required fields with an asterix (*) or something like that to show which field is actually required.

I could do this by hand, but since I already generate my validation rules with xVal I thought I could mark the required fields automatically based on the provided rules.

Is there a way to hook into either xVal or jQuery Validate to retrieve the rules, or somehow make them mark my required fields?

I’m using the latest versions of jQuery and jQuery Validate.

Thanks

Answer by Starx

Give the class required to the form elements, and use the following code

$(document).ready(function() {
     $('<span style="color:red;">*</span>').insertAfter('.required');
});

This will attach “*” to every elements with required class

Hope it helps

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!