Validators and Errors

A web form should process client side validation and error format. NUI provides supports by validator and error template.
Special thanks to WebWork for its Validation JavaScript templates.

Validators

Notes that NUI just a template engine and work on View layer, so the validation is based on client side.
Validation is easy to use in NUI, just add a p:validator after every p:editor template: 
	<td>
		<p:editor bean="mail" property="propertyName"/>
		<p:validator bean="mail" property="propertyName"/>
	</td>
NUI generate client side validation code for each property. Validation be trigered by form onsubmit event. So you must define a n:form template as source of event.

Errors

Validator should couple with a Error template, so that error message can be displayed on the page. You can add a p:error template to render the error message on every where on the page. In this case, we place error in a separate column after editor. 
<template ignoreText="false">
	<table>
	<n:form>
	<n:loop for="{'sender' , 'receiver' , 'createDate' , 'subject'}" id="'propertyName'">
		<tr>
		<td><p:title bean="mail" property="propertyName"/>: </td>
		<td>
			<p:editor bean="mail" property="propertyName"/>
			<p:validator bean="mail" property="propertyName"/>
		</td>
		<td><p:error bean="mail" property="propertyName"/>: </td>
		</tr>
	</n:loop>
		<tr><td colspan="3"><p:title bean="mail" property="'content'"/></td></tr>
		<tr><td colspan="3"><p:editor bean="mail" property="'content'"/></td></tr>
		<tr><td colspan="3"><p:error bean="mail" property="'content'"/></td></tr>
		<tr><td colspan="3"><input type="'submit'" value="'Send!'"/></td></tr>
	</n:form>
	</table>
</template>
Here is the result UI:

NUI render a span(class="errorMessage")as container of error message.
Server side error can be display by error template if a NuiContext exsits.

Next