jquery validation验证,错误提示放在input框的右边

	.formTitle{
		padding-left:38px;
		padding-right:11px;
		float:right;
	}
	
 	.formValue{ 
 		width:230px; 
 	} 
 	
	label.error {
		float: right;
        position: relative;
    	color: #ef392b;
    	font-size: 12px;
    	padding-top: 8px;
   		margin-bottom: -28px;
    	margin-right: 20px;
	}


	<form id="form1">
        <table class="form">
            <tbody><tr>
                <td class="formTitle">商户名称</td>
                <td class="formValue">
                	<div>
            			<input id="Name" name="Name" type="text" class="form-control" placeholder="请输入商户名称">
            		</div>
                </td>
                <td class="formTitle">商户编号</td>
                <td class="formValue">
                    <input id="Encode" name="Encode" disabled="true" type="text" class="form-control">
                </td>
            </tr>
            <tr>
                <td class="formTitle">地区</td>
                <td class="formValue">
                    <select id="province" name="province" style="width:110px" οnchange="select_citys(this)">
					    
					</select>
					<select id="city" name="city" style="width:110px">
					    <option id="cityf" value="">--请选择--</option>
					</select>
                </td>
                <td class="formTitle">详细地址</td>
                <td class="formValue">
                    <input id="Address" name="Address" type="text" class="form-control" placeholder="请输入地址">
                </td>
            </tr>
            <tr>
                <td class="formTitle">联系人</td>
                <td class="formValue">
                    <input id="Manager" name="Manager" type="text" class="form-control" placeholder="请输入联系人">
                </td>
                <td class="formTitle">手机</td>
                <td class="formValue">
                    <input id="Mobilephone" name="Mobilephone" type="text" class="form-control" placeholder="请输入手机号">
                </td>
            </tr>
            <tr>
                <td class="formTitle">联系电话</td>
                <td class="formValue">
                    <input id="Telephone" name="Telephone" type="text" class="form-control" placeholder="请输入电话">
                </td>
                <td class="formTitle">微信</td>
                <td class="formValue">
                    <input id="Wechat" name="Wechat" type="text" class="form-control" placeholder="请输入微信号" >
                </td>
            </tr>
            <tr>
                <td class="formTitle">邮箱</td>
                <td class="formValue">
                    <input id="Email" name="Email" type="text" class="form-control" placeholder="请输入邮箱">
                </td>
                <td class="formTitle">推荐码</td>
                <td class="formValue">
                    <input id="ReferralCode" name="ReferralCode" type="text" class="form-control" placeholder="请输入推荐码" >
                </td>
            </tr>
            <tr>
                <td class="formTitle">支付宝</td>
                <td class="formValue">
                    <input id="Alipay" name="Alipay" type="text" class="form-control" placeholder="请输入支付宝">
                </td>
            </tr>
            <tr>
                <td class="formTitle" valign="top" style="padding-top: 5px;">备注</td>
                <td class="formValue" colspan="3">
                    <textarea id="Description" name="Description" class="form-control" style="height: 100px;"></textarea>
                </td>
            </tr>
        </tbody></table>
		<div style="text-align: center">
			<button id="btn" class="btn btn-info" type="submit">保存</button>
		</div>
    </form>

    //验证
	$("#form1").validate({    
	    rules:{    
	    	Name:{    
	            required:true,
	            minlength:2,
				maxlength:18
	        },    
	        Address:{    
	            required:true    
	        },    
	        Manager:{    
	            required:true    
	        },   
	        Mobilephone:{    
	            required:true,
	            isMobile:true
	        },
	        Email:{    
	        	required: false,
	            email: true   
	        },
	        ReferralCode:{    
	        	required: true,
	        	remote: {
					url: serverWeb+"sysDepartment/isExistReferralCode",     //后台处理程序
				    type: "post",                                 //数据发送方式
				    dataType: "json",                             //接受数据格式   
				    data: {                                       //要传递的数据
				    	referralcode: function() {
				            return $("#ReferralCode").val();
				        }
				    }
	        	}
	        },
	        Alipay:{
	        	required: true
	        }
	    },    
	    messages: {
		    Name:{
			  required: "必填",
			  minlength: "长度为2-18个字符",
			  maxlength: "长度为2-18个字符"
		    },
		    Address:{
			  required: "必填",
		    },
		    Manager:{    
	            required:"必填"
	        }, 
	        Mobilephone:{
	        	required:"必填",
	        	isMobile: "格式不正确"
	        },
	        Email:{    
	            email: "格式不正确"  
	        },
	        ReferralCode:{
	        	required:"必填",
	        	remote: "推荐码不存在"  
	        },
	        Alipay:{
	        	required: "必填",
	        }
	    },
	    errorPlacement: function(error, element) { //错误信息位置设置方法
	    	 error.prependTo(element.parent());   //这里的element是录入数据的对象
    	},
    	showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            for(var i = 0; i < errorList.length; i++) {
        		$(errorList[i].element).one("blur", function() {
                     $("label.error[for='" + (this.id ? this.id : this.name) + "']").remove();
                });
            }
        },
        onkeyup:false,
		focusCleanup:false,
		submitHandler:function(form){
			if($("#province").val() == "" || $("#city").val() == ""){
				layer.msg("地址必须填");
				return false;
			}
			save();
		}
	});   





  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值