Adding Form Validation

Zen allows us to easily add client-side form validation to our form. The form save method automatically executes any validation logic that we add. For example, we can make the Name field on the form required simply by setting the value of the required attribute of the <text> element to “true”. Update the <text> element to look like this.

<text label="Name:" dataBinding="Name" required="true" size="25"/>   

Now, if the form's Name field is empty, the form cannot be saved. An attempt to save the form, causes the browser to display an Alert box and to highlight the empty Name field.

Here is the result of attempting to submit the form with an empty Name field.