Question

我正在使用jquery验证插件来验证使用bootstrap 2的表单，但是当违反规则时会添加错误类，但是在屏幕上输入框看起来并没有什么不同。如何获得输入并突出显示＆＃39;默认为bootstraps错误类并正确显示。

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

添加验证功能的messages属性，然后修改必需消息。该邮件应附在<code>标记

中

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

Answer 2

您需要添加

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

在输入周围，您希望在出错时进行颜色更改

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

2 个答案: