Get jspx at SourceForge.net. Fast, secure and Free Open Source software downloads home | download | demo project | contact us
jspx

Rate this article:

email
comment
Average Rate= 5.0

Simple Form (Validator)

This is the same as the Simple Form (Ajax) however this time form validation is used. In order to validate form data, it is simply required insert validator controls wherever needed.

Html file
  1. Set of validators are used, including the following validation types.
    1. Required Filed Validator
    2. Numeric Validator
    3. Email Validator
  2. More details about validators are found in this document

Demo

Username:
Password:
Mobile:
email:
Birthdate:
Martial Status:

Source Code:

<page contoller="org.bay.jspx.demo.live.SimpleForm" >
	<html>
		<body>
			<form>
			<ajaxPanel>
					<table cellspacing="20px;"  class="demotext">
						<tr>
							<td>
							<table>
								<tr>
									<td> Username: </td>
									<td>
									<input type="text" id="username" />
									<validator type="required" control_to_validate="username"
									 group="x" message="username cannot be empty" />
									</td>
								</tr>
								<tr>
									<td> Password: </td>
									<td>
									<input type="password" id="password" />
									<validator type="required" control_to_validate="password"
									 group="x" message="password is required" />
									</td>
								</tr>
								<tr>
									<td> Mobile: </td>
									<td>
									<input type="text" id="mobile" />
									<validator type="numeric" control_to_validate="mobile"
									 group="x" message="numbers only"  indicator="numbers"/>
									</td>
								</tr>
								<tr>
									<td> email: </td>
									<td>
									<input type="text" id="email" />
									<validator type="email" control_to_validate="email" 
									group="x" message="email should be in valid format" />
									</td>
								</tr>
								<tr>
									<td> Birthdate: </td>
									<td>
									<calendar id="birthdate" title="birth date"/>
									</td>
								</tr>
								<tr>
									<td> Martial Status: </td>
									<td>
									<select id="mstatus">
										<option value=""> -----</option>
										<option value="Single"> Single </option>
										<option value="Married"> Married </option>
										<option value="Divorced"> Divorced </option>
										<option value="In relationship"> In relationship </option>
									</select>
									<validator type="required" control_to_validate="mstatus" 
									group="x" message="please specify the martial status" />
									</td>
								</tr>
								<tr>
									<td colspan="2" align="right">
									<input type="button" onserverclick="printUser" value="save" 
									submitonce="true" group="x"/>
									</td>
								</tr>
							</table>
							</td>
							<td valign="top">
							<table id="userData" rendered="false">
								<tr>
									<td> Username: </td>
									<td> ${this.usernameVal} </td>
								</tr>
								<tr>
									<td> Password: </td>
									<td> ${this.passwordVal} </td>
								</tr>
								<tr>
									<td> Mobile: </td>
									<td> ${this.MobileVal} </td>
								</tr>
								<tr>
									<td> email: </td>
									<td> ${this.emailVal} </td>
								</tr>
								<tr>
									<td> Birthdate: </td>
									<td> ${this.birthdateVal} </td>
								</tr>
								<tr>
									<td> Martial Status: </td>
									<td> ${this.mstatusVal} </td>
								</tr>
							</table></td>
						</tr>
					</table>
				</ajaxPanel>
			</form>
		</body>
	</html>
</page>
		
				
package org.bay.jspx.demo.live;

import eg.java.net.web.jspx.engine.annotation.JspxWebControl;
import eg.java.net.web.jspx.ui.controls.WebControl;
import eg.java.net.web.jspx.ui.controls.html.GenericWebControl;
import eg.java.net.web.jspx.ui.controls.html.elements.Calendar;
import eg.java.net.web.jspx.ui.controls.html.elements.inputs.Password;
import eg.java.net.web.jspx.ui.controls.html.elements.inputs.TextBox;
import eg.java.net.web.jspx.ui.controls.html.elements.select.Select;
import eg.java.net.web.jspx.ui.pages.Page;

public class SimpleForm extends Page
{

	@JspxWebControl
	TextBox username;
	@JspxWebControl
	Password password;
	@JspxWebControl
	TextBox email;
	@JspxWebControl
	Calendar birthdate;
	@JspxWebControl
	Select mstatus;
	@JspxWebControl
	TextBox mobile;

	@JspxWebControl
	GenericWebControl userData;

	public void printUser(WebControl sender, String args)
	{
		usernameVal = username.getValue();
		passwordVal = password.getValue();
		emailVal = email.getValue();
		if (birthdate.getDate() != null)
			birthdateVal = birthdate.getDate().toString();
		mstatusVal = mstatus.getValue();
		mobileVal = mobile.getValue();
		userData.setRendered(true);
	}

	String usernameVal;
	String passwordVal;
	String emailVal;
	String birthdateVal;
	String mstatusVal;
	String mobileVal;

	public String getUsernameVal()
	{
		return usernameVal;
	}

	public String getPasswordVal()
	{
		return passwordVal;
	}

	public String getEmailVal()
	{
		return emailVal;
	}

	public String getBirthdateVal()
	{
		return birthdateVal;
	}

	public String getMstatusVal()
	{
		return mstatusVal;
	}
	public String getMobileVal()
	{
		return mobileVal;
	}

}