jquery-plugins - 如何突出显示无效部分 - twitter bootstrap/jquery/validate 插件

Question

我在 twitter bootstrap 中有一个表单:

<div class="form-div">
<form id="fvujq-form1" method="post" action="">
                    <div class="control-group name">
                    <fieldset>
                        <label>Name *</label>
                        <input type="text" name="name">
                    </fieldset>
                    </div>
                    <div class="control-group email">
                    <fieldset>
                        <label>E-Mail *</label>
                        <input type="text" name="email">
                    </fieldset>
                    </div>
                    <div class="control-group comment">
                    <fieldset>
                        <label>Your comment *</label>
                        <textarea name="comment"></textarea>
                    </fieldset>
                    </div>
              <button class="btn btn-primary">Submit</button> 
            </form>
        </div>

这就是我使用 bassistance Validate 插件验证它的方法:

$(document).ready(function() {
        $("#fvujq-form1").validate({
            submitHandler:function(form) {
                SubmittingForm();
            },
            success: function(label) {
                 label.html("✔").addClass("valid");
               },
            onfocusout: function(element) { $(element).valid(); },
            focusInvalid: false,
            highlight: function(element, errorClass, validClass) {
                 $('.form-div').find('.control-group' + element.id).addClass('error');
              },
              unhighlight: function(element, errorClass, validClass) {
                 $('.form-div').find('.control-group' + element.id).removeClass('error');
              },
            errorClass: "help-inline",
            errorElement: "strong"

我想将 .error 添加到当前验证的 div，但此代码为每个 .control-group 出现添加类，而不仅仅是验证一个:(

感谢 4 年的帮助。

Answer 1

JSFiddler Example

当您离开每个字段或单击提交按钮时，这将进行验证，所有符合规则的字段都会出现错误。

HTML

<form action="" id="fvujq-form1" class="form-horizontal">
<fieldset>  
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="name" id="name">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email Address</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="email" id="email">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="comment">Comment</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="comment" id="comment">
      </div>
    </div>    
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Submit</button>

    </div>
  </fieldset>
</form>

Javascript

$(document).ready(function(){

 $('#fvujq-form1').validate(
 {
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    comment: {
      minlength: 2,
      required: true
    },
  },
  highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
  }
 });
});