2

次のように、赤い境界線の色のエラークラスをテキスト入力フィールドに適用しようとしています。

jquery

//save
...
$("input.required").each(function(){
    if ($.trim($(this).val()).length == 0){                               
        $(this).addClass("form_error");
        formValid = false;
    }
    else{
        $(this).removeClass("form_error");
    }
});

HTML

<div class="control-group">
  <label class="control-label" for="city_id">City</label>
  <div class="controls">
    <input class="span2 required" type="text" value="" name="test" id='testId'/>
  </div>
</div>

CSS

textarea,
input[type="text"]{
  border: 1px solid #cccccc;
}

.form_error {
  border-color: #ee5f5b;
  border: 1px solid #ee5f5b;
}

これは私の選択した要素では機能しますが、テキスト入力では機能しません。私が欠けているものはありますか？

4

2 に答える 2

2

削除すると、これはうまくいきます

textarea,
input[type="text"]{
  border: 1px solid #cccccc;
}

部。あなたのクラスが適用されていると思いますが、要素のスタイリングが最後に適用され、最終的に勝ちます。

上記のセクションを削除できない場合は、.form_error を次のように変更してみてください。

.form_error {
  border-color: #ee5f5b;
  border: 1px solid #ee5f5b !important;
}

これにより、.form_error のスタイル設定が要素のスタイル設定よりも確実に優先されます。少しぎこちないですが、動作します (少なくとも、私がこれをテストしている Chrome では)。

于 2012-07-27T17:59:31.667 に答える
0

境界線のスタイルも指定する必要があるかもしれません:

border: 1px solid #ee5f5b;
于 2012-07-27T17:42:21.077 に答える