jQuery驗證錯誤消息放大glyphicons

每當顯示任何錯誤消息時，glyphicon會放大並出現亂序。爲什麼？請參閱圖片以供參考。jQuery驗證錯誤消息放大glyphicons

<form class="form-horizontal" enctype="multipart/form-data"> 
    <fieldset> 
     <div class="form-group required"> 
      <label class="col-md-3 control-label" >Ad title <sup>*</sup></label> 
      <div class="col-md-8"> 
       <input class="form-control input-md" type="text"> 
      </div> 
     </div> 
    </fieldset> 
</form>

來源

2016-06-07 PythonEnthusiast

它看起來像所需的郵件會導致容器膨脹。你的html的結構應該改變，以防止發生。 –

你能顯示你的代碼嗎？向我們展示它在錯誤出現之前的樣子，然後出現錯誤之後（使用瀏覽器的檢查器）。 –

每當顯示的錯誤消息，則glyphicon放大並超出順序。爲什麼？

圖形不放大。當您檢查DOM時，您會看到Validate插件會在input元素之後立即動態地插入錯誤消息，從而擴大容器並破壞設計。

在input元素之後插入此label是默認結果。如果您使用瀏覽器的工具來檢查你的生活DOM，你會發現這樣的事情：

<fieldset> 
    <div class="form-group required"> 
     <label class="col-md-3 control-label" >Ad title <sup>*</sup></label> 
     <div class="col-md-8"> 
      <input class="form-control input-md" type="text" name="foo"> 
      <label id="foo-error" class="error" for="foo">This field is required.</label> 
     </div> 
    </div> 
</fieldset>

在設計佈局，你必須採取這種行爲考慮所以沒有什麼休息時間。

否則，您會使用the errorPlacement callback編輯此行爲，只要您認爲合適。

errorPlacement: function(error, element) { 
    error.insertAfter(element); // <- default 
}

也許你想插入父元素之後？可以使用the errorElement option更改錯誤元素容器。

errorElement: "label" // <- default

查看所有選項：jqueryvalidation.org/validate

來源

2016-06-07 21:29:21 Sparky

我有同樣的問題，但我這個代碼解決它，只需將其調整到你的JavaScript代碼。

代碼：

 $('#form').validate({ 
    rules: { 
     fname: { 
      minlength: 3, 
      maxlength: 15, 
      required: true 
     }, 
     lname: { 
      minlength: 3, 
      maxlength: 15, 
      required: true 
     } 
    }, 

    errorElement: 'span', 
    errorClass: 'help-block', 


});

來源

2016-06-07 21:36:44

仍然是同樣的問題。 – PythonEnthusiast

jQuery驗證錯誤消息放大glyphicons

回答

相關問題