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

来源：互联网发布：比价软件哪个好编辑：程序博客网时间：2024/05/16 05:11
.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" onchange="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();}});
阅读全文
0 0