Hi,

I discussed this with Zdenek while working on SUPPORT-621, and he suggested that I open up an enhancement issue here.

I think it would be useful to add client-side validation to the form module. I've developed a JQuery plugin called jquery.validity that I think could be useful. It adds blur event handlers to all form inputs and a submit handler to the form. Both event handlers post to the current form's action via AJAX. The plugin expects a JSON response back of the format shown in the example below (Note: that the structure of the error messages is the same as that of Spring's validation errors object, so this structure would be suitable for apps that use blossom, or call to a web service that uses Spring or Grails as well).

{
	"jsonErrors":[
		{
			"object":"info.magnolia.module.form.paragraphs.models.FormModel",
			"field":"tel",
			"message":"Please provide either your phone number",
			"rejected-value":"null"
		},
		{
			"object":"info.magnolia.module.form.paragraphs.models.FormModel",
			"field":"familyName",
			"message":"Please provide your last name",
			"rejected-value":""
		},
		{
			"object":"info.magnolia.module.form.paragraphs.models.FormModel",
			"field":"givenName",
			"message":"Please provide your first name",
			"rejected-value":""
		}
	]
}

The actual validation rules and messages are all handled by the rules specified in the model and/or command object. Therefore, client-side and server-side validation use the same rules and messages. The controller needs to distinguish between AJAX requests for validation, and normal form posts, if it is an AJAX request, then the controller needs to return the errorMessages map formatted as JSON (as shown in the example above). To distinquish between types of requests, JQuery's post method assigns a content-type request header of application/json that could be used. In addition, jquery.validity adds two parameters to the post eventType and format. The eventType parameter simply indicates the event that triggered the post (either blur or submit). The format parameter indicates the format, in our case we set this to json.

Another option that I've been looking at as a possible alternative to jquery.validity is the validation offered by jQuery TOOLS FORM http://flowplayer.org/tools/release-notes/index.html#form. It offers similar functionality to the jquery.validity plugin (i.e. client-side and server-side validation rules are shared) @see http://flowplayer.org/tools/demos/validator/server-side.html. In addition, it offers more configuration options, however IMHO the format of the JSON response is not as suitable for use by Spring, Blossom, Grails, etc.

If you are interested in this, I can attach the code for jquery.validity, and we can talk more about how best to extend the form and stk modules.

Thanks,
Matt