2017-05-17 12 views
0

ここでは、コードです:javascriptの「req」バリデーターが機能しないのはなぜですか?

<script language="JavaScript"> 
 
    var frmvalidator = new Validator("contactform"); 
 
    frmvalidator.addValidation("name","required","Please provide your name"); 
 
    frmvalidator.addValidation("email","required","Please provide your email"); 
 
    frmvalidator.addValidation("email","email", 
 
    "Please enter a valid email address"); 
 
</script> 
 

 
<form method="post" name="contactform" action="contact-form-handler.php"> 
 
\t <div class="row uniform 50%"> 
 
\t \t <div class="6u 12u(mobilep)"> 
 
\t \t <input type="text" name="name" id="name" placeholder="Name" /> 
 
\t \t </div> 
 
\t \t <div class="6u 12u(mobilep)"> 
 
\t \t \t <input type="email" name="email" id="Wemail" placeholder="Email" /> 
 
\t </div> 
 
\t </div> 
 
    <div class="row uniform 50%"> 
 
\t \t <div class="12u"> 
 
\t \t <input type="text" name="subject" id="subject" placeholder="Subject" /> 
 
\t </div> 
 
\t </div> 
 
\t <div class="row uniform 50%"> 
 
\t \t <div class="12u"> 
 
\t \t \t <textarea name="message" id="message" placeholder="Enter your message" rows="6"> 
 
     </textarea> 
 
\t </div> 
 
\t </div> 
 
\t <div class="row uniform"> 
 
\t \t <div class="12u"> 
 
\t \t \t <ul class="actions align-center"> 
 
\t \t \t <li><input type="submit" value="Send Message" /></li> 
 
\t \t </ul> 
 
\t </div> 
 
    </div> 
 
</form>

ここコンソールエラーです:ここに見られるように

{ 
    "message": "Uncaught ReferenceError: Validator is not defined", 
    "filename": "https://stacksnippets.net/js", 
    "lineno": 12, 
    "colno": 27 
} 

"電子メール" のバリデータ関数は:
Screenshot of JS validation

しかしが、 「必須」有効atorsは動作しません。私は元々 "req"を試みましたが、それもうまくいきませんでした。重複するIDと名前の値が間違っている可能性があると思ったが、私はそれらを無駄に変更した。私は、JSが必要なバリデーターを適用しない理由について混乱しています。この検証が機能するにはどうすればよいですか?

編集:thisチュートリアルをガイドとして使用していました。 Validatorオブジェクトはダウンロード可能な.jsファイルにあります。
幸いにも、コメントと以前の回答が私を正しい方向に導いてくれました。以下の正確な答えを見てください。

+0

検証に使用しているライブラリを教えてください。 JavaScriptオブジェクト「Validator」は組み込まれていません。 –

+0

私はチュートリアルに従っていたので、私はライブラリについて心配していませんでした。私はそれに細心の注意を払ってくれてありがとう! – PujitM

答えて

0

私が作った間違いはかなり単純でした。
gen_validatorv4.jsスクリプトをhtmlファイルのヘッダーに入れるのではなく、</body>の直前の<body>要素の最後に配置しました。

なんらかの理由で(私は、なぜこれを説明するコメントがすばらしいのかはわかりません)、ヘッダーにスクリプトを置くとエラーが修正されました。

解決方法:HTMLのヘッダーにはバリデータスクリプトを配置し、本文の末尾には配置しないでください。

ありがとう、ありがとうございます。

+0

それはヘッダ内のすべてがコンパイルされ、DOMReadyイベントの前に実行されているためです。また、JavaScriptのほとんど(重要ではないものすべて)をドキュメントの最後に置くのがよい習慣です。この方法では、コンテンツがより早く(コンテンツがレンダリングされる前にすべてのjをダウンロードする必要はありません) – sznowicki

0

あなたは何をしようとしているのかはわかりませんが、Validorはvanilla.jsオブジェクトのようです。

ネイティブhtml5フォームの検証を使用しようとすると、正しい属性をフォーム要素に追加するだけで済みます。電子メールの入力については

それは次のようになります。 <input type="email" required="required" .../>

電子メールと、このフィールドは必須であるとして、これは、このフィールドを検証するために、ブラウザを教えてくれます。

すべてのブラウザがこれをサポートしているわけではありませんが、サーバーの検証が必要なので、javascriptでカスタムを実装しないことをお勧めします。

もし必要な場合は、githubでいくつかのjavascriptフォーム検証ライブラリを見つけてください。それらの多くがあります。

フォーム全体の検証では、onchangeイベントを使用するか、 `` `onsubmit``を自分で作成してください。

p.s. <script language="JavaScript">言語は時代遅れです。また、入力してください。十分です。

+0

これは役に立ちました! – PujitM

+0

@PujitMその後、SOの礼儀に従い、助けてくれた回答をアップアップするか、あなたの質問に答えたら「答え」としてください。 – sznowicki

+0

私はコメント前にupvoted - 私はそれを表示するための十分な担当者がありません:( – PujitM

関連する問題