JQuery Validation和Bootstrap 3用于相同的表单组 - 每个字段的错误和成功类

Question

我有一个Bootstrap 3表单,我有两个字段并排(例如,名字和姓氏),为了用BS3实现这一点,我将两个字段放在同一个表格组div中大.

但是,使用我正在使用的jQuery Validate脚本(v1.13.1),它会根据表单组向字段添加has-error和has-success样式,因此如果其中一个字段是has-error(例如,First名称),然后两个字段显示有错误样式(名字和姓氏),当它只是应该有类的字段之一.

我找到了一个看起来像是在正确的轨道上的解决方案,但它仍然无法解决问题:JQuery Validation和Bootstrap 3用于相同的表单组这段代码不起作用,但你可以看到它正在通往正确的路径我正在尝试做什么...基本上,在同一个表单组中的2个不同的字段中分离出has-error和has-success样式(highlight vs unhighlight).

这是我的简化表单HTML:

<form class="form-horizontal" name="paymentInformation" id="paymentInformation" action="verifyOrder.cfm" method="post" role="form">
<div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">First Name</label>  
  <div class="col-sm-4">
  <input id="firstname" name="firstname" placeholder="First Name" class="form-control input-md" type="text" autofocus>
  </div>
  <label for="lastname" class="col-sm-2 control-label">Last Name</label>  
  <div class="col-sm-4">
  <input id="lastname" name="lastname" placeholder="Last Name" class="form-control input-md" type="text">
  </div>
</div>
<input type="submit" value="PROCEED TO THE NEXT STEP &#xf054;" class="blueButton">
</form>

这里是简化的JS(改编自Bootstrap 3和jQuery Validation Plugin):

<script>
$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
        error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
$("#paymentInformation").validate({
    rules: {
        'firstname': {
            required: true,
            maxlength: 200
        },
        'lastname': {
            required: true,
            maxlength: 200
        }
    },
   messages: {
        'firstname': {
            required: "Enter your First Name.",
            maxlength: "Your First Name cannot exceed 200 characters"
        },
        'lastname': {
            required: "Enter your Last Name.",
            maxlength: "Your Last Name cannot exceed 200 characters"
        }
    }
});
</script>

可以发现错误,如果验证了名字或姓氏字段,那么其他字段显示它是否经过验证(如同两个字段的绿色和红色全部或者两者都没有).

这是一个显示问题的小提琴:http://jsfiddle.net/gamehendgeVA/m2o6c2vj/

任何帮助是极大的赞赏!

谢谢!

Answer 1

您的两个输入都放在单独的<div class="col-sm-4">元素中.所以你可以替换这些行:

$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
// ...
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');

用这些:

$(element).parent().removeClass('has-success').addClass('has-error');
// ...
$(element).parent().removeClass('has-error').addClass('has-success');

..或这些(与上述相同但与课程相关):

$(element).closest('.col-sm-4').removeClass('has-success').addClass('has-error');
// ...
$(element).closest('.col-sm-4').removeClass('has-error').addClass('has-success');

小提琴

或者,如果由于某种原因无法影响输入父类的类,或者您不能基于父元素(f.ex.您的项目正在开发中,或者经常更新),您可以确保错误/成功class已正确应用于字段.wrap().您的字段将包含到<span>具有正确(错误/成功)类的动态创建的元素中:

highlight: function(element) {
    $(element).parent().is('.has-success, .has-error') ? 
        $(element).parent().removeClass('has-success').addClass('has-error') : 
        $(element).wrap('<span class="has-error"></span>');
},
unhighlight: function(element) {
    $(element).parent().is('.has-success, .has-error') ? 
        $(element).parent().removeClass('has-error').addClass('has-success') : 
        $(element).wrap('<span class="has-success"></span>');
}

小提琴