Server side validation with Dojo

[gbs]

Hi,

I'm having a Spring MVC 2.5 - webflow 2 - tiles application which is quite similar to the booking mvc sample. I'm also experimenting with Dojo. There's a difference here with booking mvc sample concerning validation. I'm using server side validation in the business layer with the Spring Validation package. All required and formatting validations of my jsp fields happens in this validation layer, instead of client side with Dojo - javascript.

Problem is that I don't manage to show these server side validation errors on field level in Spring decorated dijit.form.ValidationTextBox widgets. Field errors are showing correctly with the form:errors tag, so I thought it should be possible to attach these errors to the ValidationTextBox error state, showing the error style as well.

Here's an input tag together with decoration and form:errors for the field.

<form:input id="abNumber" path="abNumber" maxlength="8" size="20"/>

<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId : "abNumber",
		widgetType : "dijit.form.ValidationTextBox",
		widgetAttrs : { promptMessage : "<fmt:message key="tooltip.abNumber" bundle="${msg}" />" },
		validate : function(){
			if (dojo.byId("abNumber.errors") == undefined) {
				return true;
			} else {
				this.widget.state = "Error";
				this.widget._setStateClass();
				return false;
			}
		}
	}));
</script>
<form:errors path="abNumber" />

The form:errors tag generates this in html:

<span id="abNumber.errors">ab is mandatory.</span>

The form is submitted with:

<input id="btnDeclChoice" class="button btnNext"
	type="submit" title="Next step in add decl " 
	value="Next" name="_eventId_confirm" />
<script type="text/javascript">
	Spring.addDecoration(new Spring.ValidateAllDecoration({ elementId:'btnDeclChoice', event:'onclick' }));
</script>

Of course the problem with this approach is that the javascript decoration on the input element is executed before form submit, there are no errors then. After submit, the errors are present but the decoration script isn't executed anymore, so the error style on the text box isn't shown.

I'm sure I'm close to getting this to work, but I'm still missing some insight.
What can I change to make sure that the decoration script reacts to the presence of the span generated by form:errors.

Any help on showing server side validation with Dojo widgets greatly appreciated!

[jeremyg484]

Interesting idea. You can take advantage of the fact that any <script> blocks rendered as part of the partial response do actually get executed after the DOM replacement takes place. One of the motivations for using Spring.addDecoration is the extra bit of management that goes on automatically in making sure the new widget instance created by executing that script block cleanly replaces the existing one.

Overriding the validate method is not going to get the execution order you're looking for, I don't think. A simpler "brute force" sort of approach would be something such as this:

<form:input id="abNumber" path="abNumber" maxlength="8" size="20"/>

<script type="text/javascript"> 
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId : "abNumber",
		widgetType : "dijit.form.ValidationTextBox",
		widgetAttrs : { promptMessage : "<fmt:message key="tooltip.abNumber" bundle="${msg}" />" }
	}));
        if (dojo.byId("abNumber.errors") != undefined) {
		dijit.byId("abNumber").state = "Error";
		dijit.byId("abNumber")._setStateClass();
	}
</script>

<form:errors path="abNumber" />

The extra bit of script should get executed both when the page initially loads (in which case the errors span won't exist, so it becomes a no-op) and then again when the fragment is replaced.

A more general solution could be possible through writing a JavaScript method that iterates through Spring.decorations to set the error state if needed, and then wiring that method up to Spring.remoting.handleResponse through Dojo's event system, that way you wouldn't have to include this extra bit of script every time you add a decoration.