自定义jquery验证器

customize jquery validator

本文关键字:验证 jquery 自定义      更新时间:2023-09-26

我有以下代码:

<form id="reg_form_pay" class="fancy_form" action="" method="POST">
  <div class="wrap_input" style="margin-bottom: 10px;">
    <p class="inp_label">Firstname:</p>
    <i> </i>
    <input id="pay_firstname" type="text" value="" name="FirstName" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-bottom: 10px;">
    <p class="inp_label">Surname:</p>
    <i> </i>
    <input id="pay_lastname" type="text" value="" name="Surname" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-bottom: 10px; margin-top: 34px;">
    <p class="inp_label">E-mail:</p>
    <i> </i>
    <input id="pay_email" type="text" value="" name="Email" style="width: 157px;">
  </div>
  <div class="wrap_input" style="margin-top: 34px;">
    <p class="inp_label">Phone:</p>
    <i> </i>
    <input id="pay_phone" type="text" value="" name="PhoneNumber" style="width: 157px;">
  </div>
</form>

和验证:

$("#reg_form_pay").validate({
            rules: {
                Email: { required: true, email: true, checkEmail: true },
                PhoneNumber: { required: true, checkPhoneNumber: true },
                FirstName: { required: true },
                Surname: { required: true }
            }, 
        });

默认情况下,验证程序在验证为false时写入label。我不想添加带有错误描述的元素。我想将类error添加到具有类wrap_input的父div中。我该如何对验证器说要这样做
谢谢

将其添加到发送到validate的选项中即可:

showErrors: function(errorMap, errorList) {
    $.each(errorList,function(i,e){
        $(e.element).parents('.wrap_input').addClass('error');
    });                   
}

现场示例:http://jsfiddle.net/nqp8J/