jquey 驗證表單是否存在不能爲空(ajax+validattion) .

 
<%@page pageEncoding="utf-8"%>
<%@include file="../../common/head.jsp"%>
<%@taglib uri="http://displaytag.sf.net" prefix="display" %>
<html> 
<head>
<title><s:text name="admin_title"/></title>
<link href="<%=path%>/css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
			src="<%=basePath%>/common/script/jquery/jquery-1.7.min.js"></script>
 <script src="<%=basePath %>/common/script/jqvalidation/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){
 	function checkName(){
 					var name = $("input#columnName").val();
 					if(name==""||name.length<2){
 						return false;
 					}
 					$.ajax({
					url : scriptGlobal.hostUrl+"/newscolumns/checkName?columnName="+name,
					type : "get",
					dataType : "json",
					success : function(data) {
						error = "error";
						if(data.actionMsg=="欄目名稱可以使用"){
							error = "success";	
						}
						var $html = "<em class='"+error+"' for='addColumnsFrom_columnCode' generated='true'>"+data.actionMsg+"</em>";
						$("#nameMes").html($html);
						
						
					}
			});
	}
   $("#checkNameBtn").click(checkName); 
	$("#addColumnsFrom").validate({
		rules: {
			columnName:{
				required:true,
				minlength: 2  
				
			},
			columnCode: {
				required:true 
			}
		},
		
		messages: {
			columnName:{
				required:'名錄名稱至少兩位',
				minlength: '名錄名稱至少兩位' 
				
			},
			columnCode: {
				required:'請輸入欄目編號'
			}
		},	
		
		errorElement: "em",				//用來創建錯誤提示信息標籤
		success: function(label) {			//驗證成功後的執行的回調函數
			//label指向上面那個錯誤提示信息標籤em
			label.text(" ")				//清空錯誤提示消息
				.addClass("success");	//加上自定義的success類
		}
	  });
  });
	</script>
</head>
<body style="padding-top:10px;">
<center>
	<div class="titleText"><s:text name="columns_add"/></div><br/>
	
	 <s:form action="/newscolumns/addColumns" theme="simple" id="addColumnsFrom">	
		<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
		  <tr>
		    <td align="right"><s:text name="columns_label_parent"/>:</td>
		    <td>
		    	<s:select list="columnsList" name="parentid" listKey="id" listValue="columnName"></s:select>
		    </td>
		  </tr>
		  <tr>
		    <td align="right"><s:text name="columns_label_name"/>:</td>
		    <td><s:textfield name="columnName" size="22" id="columnName"/><a href="#" id="checkNameBtn">檢測名稱是否存在</a><span id="nameMes"></span></td>
		  </tr>
		  <tr>		    
		    <td align="right"><s:text name="columns_label_code"/>:</td>
		    <td><s:textfield name="columnCode" size="22"/></td>		    	    
		  </tr>
		</table>
		<br>
		  <div align="center">
			<s:submit key="label_submit"/> 
			<s:reset key="label_reset"/> 
			<s:set name="label_return" value="%{getText('label_return')}"/>
		    <input type="button" name="btn_ret" value="${label_return}" onClick="window.location='<%=path%>/newscolumns/columnsQuery.action';">
		  </div>
		</s:form>	
		</center>
  </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章