web-dev-qa-db-ja.com

Bootstrap Jquery Validateでinput-group-addon wrappingエラーラベルを使用する3つのフォーム

Bootstrap 3を使用し、form-horizo​​ntalでJquery-Validateを使用してform-groupおよびinput-groupタグを使用します。エラーに対してJquery.Validateを実行すると、input-group内にラベルエラーコントロールが追加されます。 。

問題は、Jquery Validateによってラベルエラーコントロールが追加されると、input-group-addonがフォームフィールドの下の次の行に折り返されることです。 Jquery Validate error wrapping input-group-addon

ビュー： http://www.bootply.com/114554

ラベルエラーがフォームコントロールの下に留まり、notでinput-group-addonを次の行にラップする方法を教えてください。

はい、私はこの解決策を知っています-うまく機能しますが、form-horizo​​ntalのエラーラベルを整列しません： Bootstrap 3 with jQuery Validation Plugin

jqueryjquery-validatetwitter-bootstrap-3
24
bandrzej

別の方法で解決： http://www.bootply.com/2liEuyqrAb

ラベルを入力グループの外に移動する必要がありました。それを行うと、予想される動作が実行されました：フォームラベルを左、フィールドを右、エラーをフィールドの下。

5
bandrzej

問題を解決する最も簡単な方法は、CSSに絶対位置プロパティを含むエラーラベルを配置することです。あなたの例ではここに結果があります：

.text-danger {
    color: #a94442;
    position: absolute;
    width: 100%;
    top: 34px;
    line-height: 34px;
    left: 0px;


}
5
hillock

私は別のユーザーにこの問題の解決策を与えます、それは同じ問題です。

ここで見つけることができます。 Bootstrap-3：jQuery検証メッセージを含むGroup-Addon STRETCHESを入力します。

2
LXhelili