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(); } }
经过以上处理,就可以防止验证不通过也提交表单情况的发生.