0

フォームの検証コードを書きました。

function checkWholeForm(theForm) {
  // Create validation variables
  var valid = true;
  var validationMessage = "Please correct the following errors: \r\n";

  // Validate name
  if (document.getElementById('name').value.length == 0)
        {
            validationMessage = validationMessage + '  - Name is missing\r\n';
            valid = false;
        }

//(and there's a few other functions)

// Display alert box with errors if any errors found
  if (valid == false)
        {
            alert(validationMessage);
        }

        return valid;

  }

そして HTML ページでは、次のようになります。

<form action="submit.php" method="post" enctype="text/plain" onsubmit="return checkWholeForm(this)">

そして、表には次のとおりです。

<input type="text" id="name" name="name" size="20" value="" />

しかし、送信を押しても、空のテキスト ボックスではアラートがトリガーされません。私は何を間違っていますか？

編集:完全な HTML および JS については、 http: //jsbin.com/uvepin/2/editを参照してください。

4

2 に答える 2

1

OK、多くの問題があります。getElementById を使用していますが、メール ボックスに ID が設定されていません。また、フォームの検証を行うために、type = submit から type = button に変更し、onsubmit の代わりに onclick を使用します。

私の編集バージョン: http://jsbin.com/ujeval/1/

于 2013-06-02T01:41:02.160 に答える
0

ブラウザのコンソール (Chrome と IE では F12、FF では ctrl-shift-K) を開くと、コードで次のエラーが発生することがわかります。

Uncaught ReferenceError: validationMessage is not defined

...変数を として宣言したためですvalidMess。次に、質問の更新で、名前を に変更しましたvalidMessage。しかし、それでもあなたの他のコードは を参照していvalidationMessageます。

// WRONG:
var validMessage = "Please correct the following errors: \r\n";

// RIGHT:
var validationMessage = "Please correct the following errors: \r\n";

デモ: http://jsfiddle.net/JH8hg/

最新の更新に合わせて更新:

あなたの jsbin.com デモでは、onsubmitハンドラーをボタンに追加しようとしました:

<input class="button" name="send" type="submit" value="Send!" onsubmit="return checkWholeForm(this)" />

...しかし、ボタンにはonsubmitイベントがないため、これをフォーム要素に追加する必要があります:

<form action="mailto:chandra.apoorv@gmail.com" method="post" enctype="text/plain"
      onsubmit="return checkWholeForm(this)">

</form>そして、そのフォーム要素には終了タグがありません。

また、電子メール フィールドに を指定するのを忘れていたid="email"場合は、 を使用しようとしたときに JS エラーが発生したことを意味しますdocument.getElementById('email').value.length。

これらを修正した動作デモ: http://jsbin.com/ukepuh/1/edit

于 2013-06-02T01:32:48.480 に答える