2017-10-05 27 views
1

私はJavascriptを初めて使用しています。送信ボタンからJavascriptの検証機能を呼び出す

私はformValidationは関数ではありませんではないというエラーを取得していますし、コンソールに、私は次のよう見ています: にReferenceErrorを:必要ポートフォリオで が定義されていない/ JS/script.js:12:23

私は私のhtmlページ

<script src="js/script.js"></script> 

フォームにscript.jsを追加した

Portfolio 
    js 
    script.js 
    formValidation.js 
index.html 

には、以下のパッケージ構造でありますValidation.js

var FormValidation = function() { 

    var name = document.forms["contact"]["name"].value; 

    function nameValidation(name) { 

     if(name=="") { 
      alert("Enter name, required"); 
      return false; 
     }else if(name==[0-9]) { 
      alert("Only alphabets"); 
     } 

     return true; 
    } 

    nameValidation(name); 
}; 

module.exports = FormValidation; 

script.js(呼び出しformValidation.jsを)(それをエクスポートする)

'use strict'; 

var FormValidation = require("./formValidation"); 

index.htmlを

<form name="contact" action="#" method="post" enctype="text/plain"> 
<input type="text" name="name" placeholder="NAME"></br> 
<input type="text" name="email" placeholder="EMAIL" required></br> 
<input type="text" name="phoneNumber" placeholder="PHONE-NUMBER"></br> 
<input type="text-box" name="message" placeholder="MESSAGE"></br> 
<button id="submit" class="btn btn-primary" type="submit" onclick="return FormValidation()"><i class="fa fa-paper-plane">Submit</i></button></br> 
    </form> 
</div> 
<script src="js/script.js"></script> 
</body> 
</html> 

誰でもエラーが何であるかを教えてもらえますか?なぜonclickイベントのhtmlページからFormValidation()を呼び出せないのですか?

+1

あなたは 'require.js'をロードし、これは機能がありません' ')(必要とされていません。 – Barmar

答えて

0

あなたは、あなたのhtmlファイルにこのような別のスクリプトを追加する必要がありますbrowserify

のようなツールなしでそのように要求しないことはできません。 node.js(バックエンド)を使用していた場合、requireは問題なく動作しますが、クライアント側ではbrowserifyのようなツールが必要です。ここで

がbrowserifyレスソリューションです:

<script src="js/formValidation.js"></script> 
+0

はwebpackと同じブラウザですか?ですから、上記のプログラムを動作させるには、出力ファイルscript.min.jsで圧縮する必要がありますか?あなたが提案した解決策は、うまくいった。 – LifeStartsAtHelloWorld

+1

私は彼らが両方のファイルを他のファイルにまとめているので、同じツールだと思います。しかし、Browserifyは仕事をより効率的に行うために、gulp/gruntのような他のツールに頼っているようだ。 Webpackは設定するのが少し難しいです。 –

関連する問題