[MGNLFORM-54] Add client-side validation to form module Created: 20/Jul/10 Updated: 04/Nov/15 Resolved: 04/Nov/15 |
|
| Status: | Closed |
| Project: | Magnolia Form Module |
| Component/s: | validation |
| Affects Version/s: | 1.1.2 |
| Fix Version/s: | None |
| Type: | Story | Priority: | Major |
| Reporter: | Matt Dertinger | Assignee: | Unassigned |
| Resolution: | Won't Do | Votes: | 1 |
| Labels: | blossom, form, pur, stk | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Issue Links: |
|
||||
| Template: |
|
||||
| Acceptance criteria: |
Empty
|
||||
| Task DoD: |
[ ]*
Doc/release notes changes? Comment present?
[ ]*
Downstream builds green?
[ ]*
Solution information and context easily available?
[ ]*
Tests
[ ]*
FixVersion filled and not yet released
[ ] 
Architecture Decision Record (ADR)
|
||||
| Date of First Response: | |||||
| Epic Link: | Fastest magnolia websites | ||||
| Description |
|
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). JSON Response for Validation Error {
"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, |
| Comments |
| Comment by Magnolia International [ 21/Jul/10 ] |
|
Hi Matt, Client-side validation for the form module would be great. We do have a bunch of things we want/need to improve with the form module. I'm not sure how easy it would be to hack in client-side validation before we improve the "processors" part (which would essentially move the processing of the form away, and before, the page gets rendered) |
| Comment by Edgar Vonk [ 23/Oct/12 ] |
|
Hi Matt, Not sure if you're still tracking this issue but I would be interested in your jquery.validity code. |
| Comment by Michael Mühlebach [ 04/Nov/15 ] |
|
Given the thousands of other issues we have open that are more highly requested, we won't be able to address this issue in the foreseeable future. Instead we will focus on issues with a higher impact, and more votes. |