2016-10-23 12 views
-1

jquery validateを使用して、要素内の3つの属性(minlength、maxlength、required)を検証しています。jqueryの検証エラーメッセージが赤色で表示されない、スタイリングでエラーが表示されない

<input id="jumbotronSearch" type="text" class="form-control input-lg" placeholder="Location" required maxlength="50" minlength="4"/> 

エラーメッセージが表示されているときは、赤ではなく黒で表示されます。

デモを行い、検証エラーメッセージを表示する他のスレッドやサイトを見ると、メッセージが赤色になり、要素の境界線も赤くなるように見えます。これを自分自身でスタイルする必要がありますか、またはjqueryの設定パラメータが不足していますか?

エラーメッセージは次のようになります。メッセージは赤ではなく黒で、要素の境界線は赤ではありません。

enter image description here

+0

含まNOスタイルシートはありませんこのプラグインで。赤い場合は、jQuery Validateとは何の関係もありません。 – Sparky

+0

error.jsファイルが、エラーチェックを行うために使用しているjsファイルの上にあることを確認します(これが別のファイルにある場合)。私は、特定のページのフォームを検証する問題のjsファイルがvalidation.jsファイルの上にあるので、他の検証エラーログが赤でハイライト表示されていて、私は少し捨てましたが、これはそうではありませんでした。私は単純にvalidation.jsファイルの下のエラー処理を行っているjsファイルを移動し、うまくいった!これが他の人にも役立つことを願っています。 –

答えて

0

...赤であるべきメッセージのように思えるし、要素の境界線は、あまりにも赤になります!??私は、プラグインはCSSスタイルシートを含まないので、あなたはこの自分のスタイルを持って、はい ...この自分自身のスタイルを

を持っていますか。

デフォルトでは、このプラグインは無効な要素とそのメッセージラベルにerrorという名前のクラスと、有効な要素にvalidというクラスを適用します。

DEMO:jsfiddle.net/06cLoL8c/

公式サイトでチラッとあなたは何のCSSファイルが存在しない見ることができますが含まれる:

jqueryvalidation.org

のデモを他のスレッドやサイトを見てからメッセージが赤色で表示されるように見える検証エラーメッセージを表示します...

これらの他の人は、Bootstrapなどのフレームワークを使用している可能性があります.Bootstrapには、既に.error.validクラスを対象とするCSSが含まれている可能性があります。そうでない場合は、validClasserrorClassオプションを使用して、これらのクラスの名前を任意の名前に変更できます。ここで

は、上記と同様のデモですが、CSSで適用さばかげスタイルで:

jsfiddle.net/y06ur48o/

あなたはすべての利用可能なプラグインのオプションのマニュアルを読んでください:jqueryvalidation.org/validate/

+0

私はブートストラップ(最新)を使用していますので、赤色に見えますか? – user1186050

+0

@ user1186050、わかりません。私がリンクしたドキュメンテーションを読んで、それに応じてクラスを合わせてみてはいかがですか? – Sparky

+0

私が探している効果(主に赤で囲んだ部分の強調表示)はブートストラップから来ているとは思えません。私はそれがいくつかのタイプのバリデーション・アクションから来ていると確信しています。 – user1186050

関連する問題