The Hello World Enterprise Edition
Validating user inputs
Table of Contents
Goal
The goal of this tutorial is to learn how to use validator components.
The application that we are going to develop is a single page with a typical registration form. This page will contain some validator components in order to check user inputs before submitting.
What we are going to do in this tutorial is:
- To create a page with a registration form.
- To add validators associated to input components.
- To create an event handler in order to perform some server-side validations as well.
Create a new controller
Let's create a new controller as following:
<?php
public function defaultAction() {
}
}
This controller just returns a __ModelAndView instance to execute the registrationForm view.
Create a new template
Now will create a template containing the registration form as following:
<html>
<head>
<title>Registration form</title>
</head>
<body>
<h1>Registration form</h1>
<comp:form name="registration_form" action="register">
First name:<br>
<comp:inputbox name="first_name"/><br><br>
Last name:<br>
<comp:inputbox name="last_name"/><br><br>
<comp:datebox name="birdth_date"/> (YYYY-mm-dd)<br><br>
Sex:<br>
<comp:optionbox group="sex" name="male" caption="Male">
<comp:optionbox group="sex" name="female" caption="Female"><br><br>
Email address:<br>
<comp:inputbox name="email"/><br><br>
Password:<br>
<comp:inputbox type="password" name="password"/><br><br>
Repeat password:<br>
<comp:inputbox type="password" name="password_confirmation"/><br><br>
Question:<br>
<comp:combobox name="question">
<comp:item text="Your favorite pet?" value="pet"/>
<comp:item text="Your first car?" value="car"/>
</comp:combobox/><br><br>
Answer:<br>
<comp:inputbox name="answer"/><br><br>
<comp:commandbutton name="send" caption="Send"/>
</comp:form>
</body>
</html>
As you can see, we have just defined a typical registration form asking for the following values: the first name, the last name, the birdth date, the sex, an email address, a password and also a reminder question plus the answer.
Now it's time to define validation rules for our input components
Defining validation rules
There is an special component to automate a great part of the validation process: The validation rule component
This component uses a great javascript library to perform client-side validations: The LiveValidation library, by Alec Hill.
This library is plenty mature and covers a great number of different validation cases, but may be one of the most notable feature the capability to validate as soon as values are written within the form.
Continuing with the validation rule component, it has 2 main tasks:
- To generate optimized javascript code on client side
- To intercept requests that require parameter validation in order to perform same validations on server-side
So, once we have defined a validation rule, by default it performs the same validations on both the client and server side (double validation)
Not let's define some validation rules for input components within our registration form:
<html>
<head>
<title>Registration form</title>
</head>
<body>
<h1>Registration form</h1>
<comp:form name="registration_form" action="register">
First name:<br>
<comp:inputbox name="first_name"/><br><br>
Last name:<br>
<comp:inputbox name="last_name"/><br><br>
<comp:datebox name="birdth_date"/> (YYYY-mm-dd)<br><br>
Sex:<br>
<comp:optionbox group="sex" name="male" caption="Male">
<comp:optionbox group="sex" name="female" caption="Female"><br><br>
Email address:<br>
<comp:inputbox name="email"/><br><br>
Password:<br>
<comp:inputbox type="password" name="password"/><br><br>
Repeat password:<br>
<comp:inputbox type="password" name="password_confirmation"/><br><br>
Question:<br>
<comp:combobox name="question">
<comp:item text="Your favorite pet?" value="pet"/>
<comp:item text="Your first car?" value="car"/>
</comp:combobox/><br><br>
Answer:<br>
<comp:inputbox name="answer"/><br><br>
<comp:commandbutton name="send" caption="Send"/>
</comp:form>
<!--/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */-->
<!--/* Validation rules */-->
<!--/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */-->
<comp:validationrule component="first_name"
mandatory="true"
maxLength="100"
pattern="^[A-Za-z\s]+$"/>
<comp:validationrule component="last_name"
maxLength="100"
pattern="^[A-Za-z\s]+$"/>
<comp:validationrule component="birdth_date"
mandatory="true"
pattern="^\d\d\d\d\-\d\d-\d\d$"/>
<comp:validationrule component="email"
mandatory="true"
maxLength="150"
format="email"/>
<comp:validationrule component="password"
mandatory="true"
minLength="6"
maxLength="15"/>
<comp:validationrule component="password_confirmation"
mandatory="true"
matchComponent="password"/>
<comp:validationrule component="answer"
maxLength="100"
mandatory="true"/>
</body>
</html>
As you can see, we have just defined a typical registration form asking for the following values: the first name, the last name, the birdth date, the sex, an email address, a password and also a reminder question plus the answer.
Now it's time to define validation rules for our input components
Executing the Hello World Enterprise Edition
Now it's time to execute our application. Just type the following url: http://yourdomain/pathtoyourapplication/registration.action
The aspect of our application should be like the following figure once we have click on the button:
And again: No need to refresh the entire page to show the hello message. Ajax + Json instead of, which is handled automagically by the framework.
