JS高手帮忙改下。

Ant_J 发布于 2011/05/13 15:49
阅读 366
收藏 1

我用EasyInsert 4.0 动态插入input,我加入jquery.validate 验证之后
验证提示的焦点始终在第一次出错的位置上,我也知道名字是一样的,但是怎么改啊?
代码都在下面
JS包
jquery14.js
jquery.validate.js

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EasyInsert 4.0</title>
<style type="text/css">
body { font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; }
ul { margin:0; padding:0; list-style:none; }
a { margin-left:5px; color:#07F; text-decoration:none; }
a:hover { text-decoration:underline; }
input { border:1px solid #ccc; margin:2px; }
table { border-collapse:collapse; border-spacing:0; }
td { margin:0; padding:10px; border:1px solid #ccc; }
</style>
<script type="text/javascript" src="jquery14.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>  
<script type="text/javascript" src="formValidatorClass.js"></script>
<script type="text/javascript">
$(function(){
	$("#name").easyinsert();
});
</script>
</head>

<body>
<form  class="submitForm" id="submitForm" >
	<ul id="name"></ul>
	<a href="#">添加</a>
</form>	
</body>

<script>

/**
 * EasyInsert 4.0
 * http://IlikejQuery.com/EasyInsert
 * 
 * @Depend    jQuery 1.4+
**/

;(function($){
	$.fn.extend({
		"easyinsert": function(o){
			o = $.extend({
				//触发器
				clicker: null,//根据class(或id)选择,默认.next()获取
				//父标签
				wrap: "li",
				name: "name",
				type: "text",
				maxlength: 20,
				className: "i-text",
				//新增上限值
				toplimit: 0,//0表示不限制
				//初始化值,二维数组
				initValue: null//用于修改某资料时显示已有的数据
			}, o || {});
			var oo = {
				remove: "<a href=\"#nogo\" class=\"remove\">移除</a>",
				error1: "参数配置错误,数组的长度不一致,请检查。",
				error2: "参数配置错误,每组初始化值都必须是数组,请检查。"
			}
			//容器
			var $container = $(this);
			var allowed = true;

			//把属性拼成数组(这步不知道是否可以优化?)
			var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className);
			//arr ==> [name, type, value, maxlength, className] 
			var arr = new Array();
			$.each(arrCfg, function(i, n){
				if ( $.isArray(n) ) {
					arr[i] = n;
				} else {
					arr[i] = new Array();
					if ( i === 0 ) {
						arr[0].push(n);
					}else{
						//补全各属性数组(根据name数组长度)
						$.each(arr[0], function() {
							arr[i].push(n);
						});
					}
				}
				//判断各属性数组的长度是否一致
				if ( arr[i].length !== arr[0].length ) {
					allowed = false;
					$container.text(oo.error1);
				}
			});

			if ( allowed ) {
				//获取触发器
				var $Clicker = !o.clicker ? $container.next() : $(o.clicker);
				$Clicker.bind("click", function() {
					//未添加前的组数
					var len = $container.children(o.wrap).length;
					//定义一个变量,判断是否已经达到上限
					var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
					if ( !isMax ) {//没有达到上限才允许添加
						var $Item = $("<"+ o.wrap +">").appendTo( $container );
						$.each(arr[0], function(i) {
							switch ( arr[1][i] ) {
								case "select"://下拉框
									var option = "";
									$.each(arr[2][i], function(i, n) {
										option += "<option value='"+ n +"'>"+ i +"</option>";
									});
									$("<select>", {
										name: arr[0][i],
										className: arr[4][i]
									}).append( option ).appendTo( $Item );
									break;
								case "custom"://自定义内容,支持html
									$Item.append( arr[2][i] );
									break;
								default://默认是input
									$("<input>", {//jQuery1.4新增方法
										name: arr[0][i],
										type: arr[1][i],
										value: arr[2][i],
										maxlength: arr[3][i],
										className: arr[4][i]
									}).appendTo( $Item );
							}
						});
						$Item = $container.children(o.wrap);
						//新组数
						len = $Item.length;
						if ( len > 1 ) {
							$Item.last().append(oo.remove);
							if ( len === 2 ) {//超过一组时,为第一组添加“移除”按钮
								$Item.first().append(oo.remove);
							}
						}
						$Item.find(".remove").click(function(){
							//移除本组
							$(this).parent().remove();
							//统计剩下的组数
							len = $container.children(o.wrap).length;
							if ( len === 1 ) {//只剩一个的时候,把“移除”按钮干掉
								$container.find(".remove").remove();
							}
							//取消“移除”按钮的默认动作
							return false;
						});
					}
					
					//取消触发器的默认动作
					return false;
				});
				//初始化
				if ( $.isArray(o.initValue) ) {//判断初始值是否是数组(必需的)
					$.each(o.initValue, function(i, n) {
						if ( !$.isArray(n) ) {
							$container.empty().text(oo.error2);
							return false;
						}else{
							if ( n.length !== arr[0].length ) {
								$container.empty().text(oo.error1);
								return false;
							}
						}
						var arrValue = new Array();
						//初始值替换默认值
						$.each(n, function(j, m) {
							arrValue[j] = arr[2][j]
							arr[2][j] = m;
						});
						$Clicker.click();
						//默认值替换初始值
						$.each(arrValue, function(j, m) {
							arr[2][j] = m;
						});
						//上面这种[移形换位法]不知道效率怎么样,我想不出别的更好的方法
					});
				}else{
					$Clicker.click();
				}
			}
		}
	});
})(jQuery);

</script>
</html>

formValidatorClass.js

 $(document).ready(function(){       

/* 设置默认属性 */
$.validator.setDefaults({       
    submitHandler: function(form) {
        form.submit();
   }
});

// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");

//开始验证
$('#submitForm').validate({
    /* 设置验证规则 */
    rules: {
	
	  name: {
            required:true,
            stringCheck:true,
            stringCheck:true
        },
		
        
    },   
       
    /* 设置错误信息 */
    messages: {
    	/*nodeinfo*/
    	name: {
            required: "<span><font color=red>不能为空</font> </span>",
            stringCheck: "<span><font color=red>输入错误</font></span>",
            stringCheck: "<span><font color=red>输入错误</font></span>"
        },
		
        
    },
      

    /* 设置验证触发事件 */
    focusInvalid: false,
    onkeyup: false,
    
    /* 设置错误信息提示DOM */  
    errorPlacement: function(error, element) {       
        error.appendTo( element.parent());       
    },
       
});
  
});


加载中
0
Ant_J
Ant_J

动态添加input之后 ,哪出错就在哪个input的后面提示.

返回顶部
顶部