liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案

时间:2022-11-17 18:16:43

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="保存"onclick="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();
				}
			}



经过以上处理,就可以防止验证不通过也提交表单情况的发生.