moving form validation to client-side

Hi I know with javascript we can validate the input of a form on the client, is there an easy way to specify this in rails? I am thinking the javascript code getting generated using some sort of DSL?

While looking around I did mange to come across these two, however I like the jQuery solution better

Has anyone got the jquery validator working? I find it's buggy, when validating password, it's very obtrusive! I get an error as soon as I type, then it deletes what's been typed in the password field, which for me if 1 character!

Have you seen this? http://railscasts.com/episodes/263-client-side-validations

Hi Mohamad, thanks I will take a look at this!

jQuery(function(){

	jQuery('.ValidField').each(function(){

		jQuery(this).validate({

			expression: "if (VAL) return true; else return false;",

			message: "Please enter the Required field"

		});

	});

	jQuery('.ValidInteger').each(function(){

		jQuery(this).validate({

			expression: "if (VAL.match(/^[0-9]*$/) && VAL) return true; else return false;",

			message: "Please enter a valid numeric value"

		});

	});

	jQuery(".ValidDropdown").each(function(){

		jQuery(this).validate({

			expression: "if (VAL != '') return true; else return false;",

			message: "Please make a selection"

		});

	});

	//put * on valid fields

	//jQuery('.ValidField').prev().prev().after('*').css('color','#FF0000');

		//prev prev => <label>

	jQuery('.ValidField, .ValidInteger, .RequiredField, .ValidDropdown,.ValidEmail').prev().prev().after('*');

	// for valid emails fields

	jQuery(".ValidEmail").each(function(){

		jQuery(this).validate({

			expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",

			message: "Please enter a valid Email ID"

		});

	});

	//for valid date format

	jQuery(".ValidDate").each(function(){

		jQuery(this).validate({

			expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[0]), parseInt(VAL.split('-')[1]))) return false; else return true;",

			message: "Please enter a valid Date"

		});

	});

});

add this jquery in application.js in app/assests/javascript/application.js and add javascript.validation.js in javascript which i am sending to as an attachment.hope this will working for you.

jquery.validate.js (3.79 KB)