Page
The following is register.jsp, which takes required information from user regarding registration. For this example, we focus only on validation of username and not the actual registration process.
The most important thing is to know how to access JSF component from JQuery. The id given to inputText is consisting of formid:componentid. So in this example the id given to textbox is registerform:username. But the presence of : (colon) causes problem to JQuery. So, we need to escape : (colon) using two \\ characters before colon - registerform\\:username.
//register.jsp
<%@page contentType="text/html" %>de">
<%@page contentType="text/html" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" src="jquery-1.4.2.js"></script>
<script language="javascript">
function checkUsername(){
$.get( "checkusername.jsp",{username : $("#registerform\\:username").val()},updateUsername);
}
function updateUsername(response)
{
if (response) {
$("#usernameresult").text(response); // update SPAN item with result
}
</script>
<title>Registration</title>
</head>
<body>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<f:view>
<h2>Registration </h2>
<h:form id="registerform">
<table>
<tr>
<td>Username : </td>
<td><h:inputText id="username" value="#{userBean.username}" required="true" onblur="checkUsername()" />
<h:message for="username" />
<span id="usernameresult" />
</tr>
<tr>
<td>Password : </td>
<td><h:inputSecret id="password" value="#{userBean.password}" required="true" /> <h:message for="password" /> </td>
</tr>
<tr>
<td>Re-enter Password : </td>
<td><h:inputSecret id="confirmPwd" value="#{userBean.confirmPwd}" required="true" /> <h:message for="confirmPwd" /> </td>
</tr>
<tr>
<td>Email Address : </td>
<td><h:inputText id="email" value="#{userBean.email}" required="true" onblur="checkEmail()" /> <h:message for="email" /> </td>
<span id="emailresult" />
</tr>
</table>
<p/>
<h:commandButton actionListener="#{userBean.register}" value="Register" />
<p/>
<h3><h:outputText value="#{userBean.message}" escape="false" /> </h3>
<p/>
</h:form>
</f:view>
</body>
</html>lt;/f:view>
</body>
</html>
Bean
The above JSF Form uses
userBean, which is the name given to
beans.UserBean class. The class and its entries in
faces-config.xml file are given below.
UserBean is the managed bean that stores data coming from JSF form. It contains an action listener - register(), which is supposed to process the data to complete registration process. We don't deal with it as our focus is only on validating username.
//UserBean.java
package beans;
public class UserBean {
private String username, password, email,confirmPwd, message;
public UserBean() {
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getConfirmPwd() {
return confirmPwd;
}
public void setConfirmPwd(String confirmPwd) {
this.confirmPwd = confirmPwd;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public void register(ActionEvent evt) {
if (! password.equals(confirmPwd))
{
message = "Password do not match!";
return;
}
// do registration
} // register
}
xml
The following entry is required in faces-config.xml for UserBean managed bean.
<!-- faces-config.xml -->
<managed-bean>
<managed-bean-name>userBean</managed-bean-name>
<managed-bean-class>beans.UserBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Check
Now create a checkusername.jsp to check whether given username is valid. It sends a message if username is already exists otherwise it sends empty string (nothing).
<%@ page import="java.sql.*" contentType="text/plain"%>
<%
String username = request.getParameter("username"); // sent from client
// connect to oracle using thin driver
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","youruser","yourpassword");
PreparedStatement ps = con.prepareStatement("select username from users where username = ?");
ps.setString(1,username);
ResultSet rs = ps.executeQuery();
if ( rs.next()) { // found username
out.println("Username is already present!"); // send this to client
}
rs.close();
ps.close();
con.close();
%>
Deploy and Test
Now deploy the web application and run register.jsp. If you enter a username that is already present in USERS table then we get message - Username is already present - in SPAN item on the right of username field. If username is unique then SPAN item is set to empty string ( as JSP returns nothing). from:http://www.srikanthtechnologies.com/blog/java/jquerywithjsf.aspx
posted on 2011-05-30 21:38
junly 閱讀(791)
評論(0) 編輯 收藏 所屬分類:
ajax/jquery/js