如何使用AJAX数据验证创建JSF表单
[英]How to create JSF form with AJAX data validation
问题描述
I'm working on a JSF form prototype for inserting data into database table using AJAX data validation This is the JSF page: 
我正在研究一个JSF表单原型，以使用AJAX数据验证将数据插入数据库表中，这是JSF页面：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_databasez.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form>
<div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:panelGrid columns="2">
<h:panelGroup>Session ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" >
<f:validateLength minimum="0" maximum="15"/>
<f:ajax render="sessionidvalidate" event="blur"/>
</h:inputText>
<h:outputText id="sessionidvalidate" rendered="#{DatabaseController.validateSessionid}" value="session is already registered" />
</h:panelGroup>
<h:panelGroup>User ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="userid" value="#{DatabaseController.formMap['userid']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Login Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Last Refresh Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>User IP</h:panelGroup>
<h:panelGroup>
<h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
</h:panelGrid>
</div>
<div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px">
<h:commandButton value="Create User" action="#{DatabaseController.saveData}"/>
</div>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
This is the managed bean: 这是托管bean：
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
// or import javax.faces.bean.SessionScoped;
import javax.inject.Named;
/* include SQL Packages */
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.HashMap;
import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import javax.annotation.Resource;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
// or import javax.faces.bean.ManagedBean;
import org.glassfish.osgicdi.OSGiService;
// Demo Insert Form
@Named("DatabaseController")
@SessionScoped
public class Database implements Serializable {
private HashMap<String, String> formMap = new HashMap<>();
public Database() {
}
/* Call the Oracle JDBC Connection driver */
@Resource(name = "jdbc/Oracle")
private DataSource ds;
public HashMap<String, String> getformMap() {
return formMap;
}
/*
CREATE TABLE ACTIVESESSIONS(
SESSIONID VARCHAR2(30 ) NOT NULL,
USERID VARCHAR2(30 ) NOT NULL,
LOGINTIME TIMESTAMP(6),
LASTREFRESHTIME TIMESTAMP(6),
USERIP VARCHAR2(30 )
)
/
*/
@PostConstruct
public void hashMapGenerate() {
/* Initialize the hashmap */
formMap.put("sessionid", null);
formMap.put("userid", null);
formMap.put("logintime", null);
formMap.put("lastrefreshtime", null);
formMap.put("userip", null);
}
public int saveData() throws SQLException, java.text.ParseException {
// formMap = new HashMap<String, String>();
String SqlStatement = null;
if (ds == null) {
throw new SQLException();
}
Connection conn = ds.getConnection();
if (conn == null) {
throw new SQLException();
}
PreparedStatement ps = null;
/*
CREATE TABLE ACTIVESESSIONS(
SESSIONID VARCHAR2(30 ) NOT NULL,
USERID VARCHAR2(30 ) NOT NULL,
LOGINTIME TIMESTAMP(6),
LASTREFRESHTIME TIMESTAMP(6),
USERIP VARCHAR2(30 )
)
/
*/
try {
conn.setAutoCommit(false);
boolean committed = false;
try { /* insert into Oracle the default system(Linux) time */
SqlStatement = "INSERT INTO ACTIVESESSIONS"
+ " (SESSIONID, USERID, LOGINTIME, LASTREFRESHTIME, USERIP)"
+ " VALUES (?, ?, ?, ?, ?)";
ps = conn.prepareStatement(SqlStatement);
ps.setString(1, formMap.get("sessionid"));
ps.setString(2, formMap.get("userid"));
ps.setTimestamp(3, toTimeStamp(formMap.get("logintime")));
ps.setTimestamp(4, toTimeStamp(formMap.get("lastrefreshtime")));
ps.setString(5, formMap.get("userip"));
ps.executeUpdate();
conn.commit();
committed = true;
}
finally
{
if (!committed) {
conn.rollback();
}
}
} finally {
/* Release the resources */
ps.close();
conn.close();
}
return 0;
}
private Timestamp toTimeStamp(String s) throws java.text.ParseException
{
Timestamp ts = null;
java.util.Date date = null;
if (s == null || s.trim().isEmpty()) return ts;
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.S");
date = (java.util.Date) sdf.parse(s);
ts = new Timestamp(date.getTime());
return ts;
}
/* Validators section */
public boolean getvalidateSessionid(){
//do SQL query
return true;
}
}
I'm having difficulties in implementing the form validation. 我在实施表单验证时遇到困难。 I want to pass the String entered by the used and check it into database is this value already into the database table. 我想传递使用者输入的字符串，并将其检查到数据库中，该值是否已进入数据库表中。 Here I'm calling the Java method to check the value: 在这里，我正在调用Java方法来检查值：
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" >
<f:validateLength minimum="0" maximum="15"/>
<f:ajax render="sessionidvalidate" event="blur"/>
</h:inputText>
<h:outputText id="sessionidvalidate" rendered="#{DatabaseController.validateSessionid}" value="session is already registered" />
</h:panelGroup>
How I can send the inserted value to the Java method? 如何将插入的值发送到Java方法？
Best Wishes 最好的祝愿
2 个解决方案
解决方案1
9 已采纳 2012-05-04 19:56:17
You need to create a Validator . 您需要创建一个Validator 。
Kickoff example: 开球示例：
@FacesValidator("sessionIdValidator")
public class SessionIdValidator implements Validator {
@Override
public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
// ...
if (yourDataService.existSessionId(value)) {
throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Session ID is already in use, please choose another.", null));
}
}
}
Use it as follows: 如下使用它：
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}">
<f:validateLength minimum="0" maximum="15" />
<f:validator validatorId="sessionIdValidator" />
<f:ajax event="blur" render="sessionidMessage" />
</h:inputText>
<h:message id="sessionidMessage" for="sessionid" />
Note that you should use a <h:message> to show validation messages. 请注意，您应该使用<h:message>显示验证消息。 You haven't any one in your view. 您认为没有任何人。 Apply the same for all your other fields: 将其应用于所有其他字段：
<h:inputText id="userid" value="#{DatabaseController.formMap['userid']}">
<f:validateLength minimum="0" maximum="15" />
<f:ajax event="blur" render="useridMessage" />
</h:inputText>
<h:message id="useridMessage" for="userid" />
If you want to use @Resource or @EJB or @Inject in the validator, then replace the @FacesValidator annotation by @ManagedBean or (as you seem to use CDI for some reason) @Named : 如果要在验证器中使用@Resource或@EJB或@Inject ，则将@FacesValidator批注替换为@ManagedBean或（由于某种原因似乎使用CDI） @Named ：
@Named
public class SessionIdValidator implements Validator {
@Resource
private DataSource dataSource;
@Inject
private YourDataService yourDataService;
// ...
}
and use it as follows instead 并如下使用它
<f:validator binding="#{sessionIdValidator}" />
解决方案2
1 2012-05-04 19:47:07
Just add listener in your tag h:inputText : 只需在标签h:inputText添加侦听器：
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"
valueChangeListener="#{DatabaseController.validateSessionid}">
So you can check the entered value on the server side. 因此，您可以在服务器端检查输入的值。 When a user tabs out of the input field, JSF makes an ajax-call to the server and runs the name input component through the execute portion of the life cycle. 当用户跳出输入字段时，JSF会对服务器进行Ajax调用，并在生命周期的执行部分运行名称输入组件。 This means that JSF will invoke the name input's value-change listener specified in attribute valueChangeListener during the validations process phase of the life cycle. 这意味着JSF将在生命周期的验证过程阶段调用在属性valueChangeListener中指定的名称输入的值更改侦听器。
And I would suggest to implement this method: 我建议实现此方法：
public void validateSessionid(ValueChangeEvent e) {
UIInput nameInput = e.getComponent()
String sessionid = nameInput.getValue()
//do SQL query
}
After the ajax-call returns JSF renders the h:outputText id="sessionidvalidate" . 在ajax调用返回之后，JSF呈现h:outputText id="sessionidvalidate" 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将JSF表单数据传递给Spring Controller - How to pass jsf form data to spring controller
JSF2：提交AJAX表单 - JSF2: Submit AJAX form
jsf ajax必须采用相同的形式吗？ - jsf ajax must be in the same form?
如何ajax jsf 2 outputLink - How to ajax jsf 2 outputLink
JSF h：inputText验证和f：ajax渲染 - JSF h:inputText validation and f:ajax render
jQuery验证功能后触发jsf ajax - jsf ajax trigged after jquery validation function
JSF 2.2-具有multipart / form-data的Ajax表单存在一些错误 - JSF 2.2 - ajax in form with multipart/form-data has some error
有条件地要求以a4j格式进行jsf验证 - Conditionally required jsf validation in a4j form
JSF 2 动态表单和bean验证JSR 303 - JSF 2 dynamic form and bean validation JSR 303
关于表单验证的初学者JSF问题 - A beginner's JSF question about form validation
相关标签