需要其他文本字段 jQuery 验证

Question

我有一个如下所示的表格：

我能够轻松验证名称字段、电子邮件字段和复选框组，但如果选中另一个复选框并且未填写附加字段，我希望复选框组失败。

Fiddle: http://jsfiddle.net/yfLmana8/

这是我的 JS（不适用于复选框）：

$('#contact').validate({
    rules: {
      other: {
        required: {
          depends: function(element) {
            return $(".contact_more_info_other_chk").is(":checked");
          }
        }
      }
    },
    errorPlacement: function(error, element) {},
    highlight: function(element, errorClass, validClass) {
      if (element.name == 'name') {
        $('.contact_name').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'email') {
        $('.contact_email').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'more_info[]' ) {
        $('.contact_more_info').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'other') {
        $('.contact_more_info').addClass(errorClass).removeClass(validClass);
        $('.contact_more_info_other_txt').addClass(errorClass).removeClass(validClass);
      }
    },
    unhighlight: function(element, errorClass, validClass) {
      if (element.name == 'name') {
        $('.contact_name').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'email') {
        $('.contact_email').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'more_info[]') {
        $('.contact_more_info').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'other') {
        $('.contact_more_info').addClass(validClass).removeClass(errorClass);
        $('.contact_more_info_other_txt').addClass(validClass).removeClass(errorClass);
      }
    },
  });
})

HTML:

<form action="" id="contact">
 <div class="contact_name">
   <input type="text" name="name" placeholder="Name" required>
   <i class="fa fa-exclamation-circle form-feedback"></i>
   <i class="fa fa-check-circle form-feedback"></i>
 </div>
 <div class="contact_email">
   <input type="email" name="email" placeholder="Email" required>
   <i class="fa fa-exclamation-circle form-feedback"></i>
   <i class="fa fa-check-circle form-feedback"></i>
 </div>
 <div>
   <input type="text" name="company" placeholder="Company">
 </div>
 <div>
   <input type="text" name="fav_brand" placeholder="Favorite Brand">
 </div>
</div>
<div class="contact_more_info">
 <h3>What keeps you up at night?</h3>
 <i class="fa fa-exclamation-circle form-feedback"></i>
 <i class="fa fa-check-circle form-feedback"></i>
 <div>
   <label>
     <input type="checkbox" name="more_info[]" required> Lead gen / gain interest
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Customer dev / relationship growth
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Lead nurture / inform to conversion
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Retention / minimize attention
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Onboarding / experience management
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Winback / recoupe lost revenue
   </label>
 </div>
 <div class="col-xs-12">
     <input type="checkbox" name="more_info[]" class="contact_more_info_other_chk"> Other <input class="other" type="text" name="other" class="contact_more_info_other_txt">
 </div>
</div>
 <div>
   <button type="submit" class="btn btn-default">Submit</button>
 </div>
</form>

Answer 1

您只需要一个复选框组的自定义方法。这会查看最后一个复选框是否被选中，如果文本框留空则失败。

$.validator.addMethod('otherbox', function(value, element, params) {
    if ($(".contact_more_info_other_chk").is(':checked')) {
        return ($('[name="other"]').is(':filled')) ? true : false;
    } else {
        return true;
    }
});

在 rules 对象中...

    rules: {
        other: {
            required: {
                depends: function (element) {
                    return $(".contact_more_info_other_chk").is(":checked");
                }
            }
        },
        'more_info[]': {
            required: true,
            otherbox: true
        }
    }

演示：http://jsfiddle.net/L76fvhym/

需要其他文本字段 jQuery 验证

Other textfield required jQuery validate

jquery

jquery-validate