1.因项目需求,要对某个字段进行ajax验证,在上一篇博客(http://blog.csdn.net/u013310075/article/details/17652501)中详细介绍了liferay中集成jQuery Validation Engine的过程,但发现有一个bug(ajax验证不通过也提交表单),网上很多朋友通过修改源码暂时解决了这个问题,但我尝试后并不奏效,于是寻求另外的解决方案,下面的这种方案可能并不是一种特别好解决方案,如果有更好的解决方案,欢迎大家一起探讨.
2.解决方案:在提交表单前在进行一次ajax校验,返回一个状态,如果通过则提交表单,不通过,则不提交.下面是具体的实现
<%@ include file="/html/merchant/validationEngine-cn.jsp"%>
<%
String rootPath = renderRequest.getContextPath();
%>
<link rel="stylesheet" href="<%=rootPath%>/css/formValidator/validationEngine.jquery.css" type="text/css"/>
<script type="text/javascript" src="<%=rootPath%>/js/formValidator/jquery.validationEngine.js"></script>
<!--发送ajac请求-->
<portlet:resourceURL id="queryAppCode" var="queryAppCode"/>
<form action="${publish}" name="merchantForm" id="merchantForm" method="post">
<input type="text" name="appCode" value="${merchant.appCode}" class="validate[required,maxSize[200],custom[onlyLetterNumber],ajax[ajaxAppCodeCall]]" id="appCode">
//这是提交表单的button
<input type="button" value="保存"οnclick="sendmg()">
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#merchantForm").validationEngine();
});
function sendmg() {
var appCode = $("#appCode").val();
$.ajax({
url: '${queryAppCode}&appCode='+appCode,
type: 'post',
dataType: 'text',
timeout: 5000,
error: function(){},
success: function(result) {
//alert('成功返回'+result);
if(result=='success') {
//成功,则提交表单
merchantForm.submit();
}else {
//失败,阻止表单提交
$("#merchantForm").validationEngine("validate");
return false;
}
}
});
</script>
//后台可以这样处理
public void serveResource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
String reString = resourceRequest.getResourceID();
if(reString.equals("queryAppCode")) {
PrintWriter out = resourceResponse.getWriter();
String appCode = ParamUtil.getString(resourceRequest, "appCode");
//查询数据库
Merchant merchant =
MerchantLocalServiceUtil.getMerchantByAppCode(appCode);
String result;
if (Validator.isNotNull(merchant)) {
//如果数据库中有这个appCode,则返回失败
result = "failure";
}
else {
result = "success";
}
out.print(result);
out.flush();
out.close();
}
super.serveResource(resourceRequest, resourceResponse);
}
在validationEngine-cn.jsp还要这么定义下:
<!--在validationEngine-cn.jsp还要这么定义下:-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/html/common/init.jsp"%>
<!--appCode失去焦点的时候发送ajax验证-->
<portlet:resourceURL var="appCodeAjaxUrl">
<portlet:param name="p_p_resource_id" value="checkAppCode"/>
</portlet:resourceURL>
//找到一些ajaxxxx的后面添加一个
"ajaxAppCodeCall" : {
"url" : "<%=appCodeAjaxUrl%>",
// you may want to pass extra data on the ajax call
"alertText" : "* 该便民店编码已存在,请重新输入!",
"alertTextLoad" : "* 验证中, 请稍等...",
"alertTextOk" : "* 恭喜,该便民店编码可用!"
},
//后台处理代码
public void serveResource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
String reString = resourceRequest.getResourceID();
if (reString.equals("checkAppCode")) {
PrintWriter out = resourceResponse.getWriter();
// appCodeNameName就是input输入文本框的id
String appCodeName =
ParamUtil.getString(resourceRequest, "fieldId");
String appCodeValue =
ParamUtil.getString(resourceRequest, "fieldValue");
Gson gson = new Gson();
String[] appCodeValidators = new String[2];
Merchant merchant =
MerchantLocalServiceUtil.getMerchantByAppCode(appCodeValue);
if (Validator.isNotNull(merchant)) {
appCodeValidators[0] = "appCode";
appCodeValidators[1] = "";// 表示appCode被占用,在新版本中应该用screenValidators[1]
}
else {
appCodeValidators[0] = "appCode";
appCodeValidators[1] = "true";// 表示appCode可用
}
String str = gson.toJson(appCodeValidators);
out.print(str);
out.flush();
out.close();
}
}
经过以上处理,就可以防止验证不通过也提交表单情况的发生.