2016-04-10 17 views
0

私のページにフォームがあり、jQueryバリデーションプラグインを使ってhttp://jqueryvalidation.org が入力されていない場合はフォームフィールドの下にエラーが表示されます。必要なフォームフィールドのスタイルを設定するには?

私はこれらのエラーのスタイルを設定することができますか?私は基本的に、実際のフィールド自体の中にエラーを表示し、テキストを特定の色にしたい。これどうやってするの?ここで

は私のWebページ http://geofilterme.com/makemeone/

<form id="form" class="topBefore" method="post" action="thankyou.php"> 
     <input id="name" type="text" name="sender" placeholder="Name" required=""> 
      <input id="email" type="email" name="senderEmail" placeholder="E-mail" required=""> 
     <input id="snapchat" type="text" name="snapchat" placeholder="Snapchat username"> 
     <input id="reach" type="text" name="reach" placeholder="Estimated reach (number of people)" required=""> 
      <textarea id="message" type="text" name="message" placeholder="Describe what you want on the geofilter, and what it&#8217s for:" required=""></textarea> 
     <input id="submit" type="submit" name="submit" value="SUBMIT"> 
    </form> 
+2

CSSを使用したスタイル。ポジションはjqueryになります –

+0

ポジションを見つける場所がわかりません。そして、私はCSSで何を呼びますか? –

+0

各要素にはIDがあります。これらを使用すると、個別にスタイルを設定できます。例えば、 '#name {width:100px; } '。複数の要素をスタイルする場合は、各要素で同じクラス名を使用します: 'class =" form_input_fields "'そしてCSSを使ってそれらのすべてをスタイルします: '.form_input_fields {width:100px; } ' – icecub

答えて

0

まずあなたが内部のそれはあなたがすべてのエラー要素に対してどのようなクラスを使用するように指示するコードのいくつかの行では、JavaScriptの検証ファイルを検索している必要がありますし、特定のIDを作成しますあなたが与えるIDで検証を使用する各要素に対して

など。 要素に 'email'というIDを指定した場合、その要素には 'email-error'というIDのエラーを保持するラベル要素が作成されます。

jquery.validate.jsにこの

// Create error element 
error = $("<" + this.settings.errorElement + ">") 
    .attr("id", elementID + "-error") 
    .addClass(this.settings.errorClass) 
    .html(message || ""); 

は、だからあなたの場合には、エラーのIDのとクラス個人がであることを行うコードの一部:

ID: メールエラー、リーチ・エラー、メッセージエラー

クラス: エラー

それとも、ただ助けることができるいくつかのツールで見ることができます火かき棒のようなあなた、ブラウザの開発者ツールe.t.c

あなたが最初にあなた自身のもう少し詳しく調べて尋ねる前に。

+0

ありがとうございますが、実際のフィールドの中にエラーメッセージを追加する方法を理解できませんか? "Name"、 "Email"などのラベルの後ろに置いておきます。 –

+0

jquery.validateのドキュメントには、それを試してやるためのたくさんのオプションがあります。私たちはあなたに最初のステップを与えます。ただ検索する。あなたが何かを最初に試していなければ、あなたの手に答えを与えることを期待しないでください。 –

関連する問題