twitter-bootstrap - 发生 jquery 验证错误时，bootstrap css 错误类不显示

Question

我正在使用 jquery 验证插件来验证我使用 bootstrap 2 的表单，但是当违反规则时，会添加错误类，但在屏幕上输入框看起来没有任何不同。如何使输入“突出显示”默认为引导错误类并正确显示。

HERE IS THE HTML
 <dl class="dl-horizontal">
    <dt>Contract Name: </dt>
      <dd>
         <input name="myInput" type="text" />
      </dd>
 </dl>


HERE IS THE JAVASCRIPT
<SCRIPT type="text/javascript" src="script/jquery.validate.min.js"></SCRIPT>
<script type="text/javascript">
    $(document).ready(function(){


    $('.submitOCform').click(function() {                        
       if($("#submitForm").valid()) {
            document.forms["submitForm"].submit();
       }
    });

    //Load the form validation for the page    
      $("#submitForm").validate({
        rules: {
          "myInput": {
            required: true,
            maxlength:100
          }                  
        },
          highlight: function(label){
              $(label).closest('.control-group').addClass('error');
              $(label).closest('.control-group').removeClass('success');
          },
          success: function(label){
            $(label).closest('.control-group').addClass('success');
            $(label).closest('.control-group').removeClass('error');
          },
          errorPlacement: function(error, element) {
                      error.appendTo(element.parent());
          }
      });

    }); // END DOC Ready        
</script>

Answer 1

您需要添加一个

<div class='control-group'></div>

围绕您想要在错误时更改颜色的输入

Answer 2

添加messages验证功能的属性并编辑所需的消息。消息应包含在<code>标签中

$("#submitForm").validate({
    rules: {
      "myInput": {
        required: true,
        maxlength:100
      }
    }, 
    messages: {
        myInput: {
            required: "<code>Please specify something here</code>",
        }
    }
});