.field_with_errors混亂引導樣式表格

我已經使用bootstrap 3的網格系統來佈局一個簡單的註冊表單。但是，如果Rails中的驗證失敗，那麼添加類「field_with_errors」的div會混淆我的佈局。.field_with_errors混亂引導樣式表格

下面是如何在我的形式的線一般是這樣的：

<div class="form-group"> 
    <label class="col-xs-2 control-label" for="user_secondary_email">Secondary email</label> 
    <div class="col-xs-4"> 
    <input class="form-control" id="user_secondary_email" name="user[secondary_email]" type="text" /> 
    </div> 
</div>

如果驗證失敗當前應用的樣式看起來是這樣的：

<div class="form-group"> 
    <div class="field_with_errors"><label class="col-xs-2 control-label" for="user_primary_email">Primary email</label></div> 
    <div class="col-xs-4"> 
     <div class="field_with_errors"><input class="form-control" id="user_primary_email" name="user[primary_email]" type="text" value="" /></div> 
    </div> 
</div>

我做了一些研究，並就我理解，這是如何代碼應該看起來像：

<div class="form-group has-error"> 
     <label class="col-xs-2 control-label" for="user_secondary_number">Secondary number</label> 
     <div class="col-xs-4"> 
      <input class="form-control" id="user_secondary_number" name="user[secondary_number]" type="text" /> 
     </div> 
    </div>

我不明白我我怎樣才能讓應用程序添加額外的類到正確的html標籤？

任何幫助表示讚賞！

來源

2014-01-16 Thomas Kuhlmann

你可以使用jquery嗎？ – NoobEditor

你使用什麼樣的表單生成器？ Rails的form_for？簡單的形式？ – lawitschka

您可能沒有正確定義field_with_errors。在你的CSS，你應該有這樣的代碼：

.field_with_errors { 
    @extend .has-error; 
}

從

除此之外，您的應用程序的行爲像它應該。你期望的代碼（你的問題的第三個代碼塊）是不正確的，因爲沒有任何字段將使用field_with_errors -class。問題在於你的css文件。所以如果我的解決方案不起作用，請發佈該文件。

來源

2014-01-16 15:49:14 AWM

謝謝，您指出我的方向正確 - 我使用腳手架創建了一些我的代碼。而scaffold.css似乎推翻了bootstrap.css和我的custom.css。由於我不需要它，刪除scaffold.css解決了這個問題。再次感謝！ –

這可以起作用，但是當您使用插件進行輸入時（例如，使用日曆圖標等），它仍會打破圓角。 – kovpack

對於引導程序4，要擴展的類是'.has-danger'。 – Thilo

.field_with_errors混亂引導樣式表格

回答

相關問題