同一表单组的 JQuery 验证和 Bootstrap 3 - 每个字段的错误和成功类

Question

我有一个 Bootstrap 3 表单，其中并排有 2 个字段(例如名字和姓氏)，为了使用 BS3 实现此目的，我将这两个字段放在同一个表单组 div 中，效果很好。

但是，使用我正在使用的 jQuery Validate 脚本 (v1.13.1)，它会向基于 form-group 的字段添加 has-error 和 has-success 样式，因此如果其中一个字段是 has-error (例如，名字)，那么当它只是应该具有该类的字段之一时，两个字段都会显示有错误样式(名字和姓氏)。

我找到了一个似乎走在正确轨道上的解决方案，但它仍然没有解决问题:JQuery Validation and Bootstrap 3 for same form-group该代码不起作用，但您可以看到它位于我想要做的事情的正确路径上...基本上，将 2 个不同字段的 has-error 和 has-success 样式(突出显示与取消突出显示)分开相同的表单组。

这是我的简化表单 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 with 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>

该错误可以发现，如果“名字”或“姓氏”字段已验证或未验证，则其他字段会显示该字段已验证或未验证(就像“全部或都不”，两者都显示为绿色和红色)字段)。

这是一个显示问题的 fiddle :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');

Fiddle

<小时/>

或者，如果由于某种原因您不能影响输入父级上的类，或者您不能基于父级元素(例如您的项目正在开发中，或者经常更新)，您可以确保使用 .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>');
}

Fiddle