提出時にスパンが消える

Question

JavaScriptの検証コードを使用して簡単なフォームを作成するように要求されました。私はフォーム全体を構築しましたが、すべての検証スクリプトが動作していますが、適切なフィールドの横にスパンタグの関連エラーを表示するように求められています（以前のようにアラートを表示するのではなく）。

以前に入力した適切なエラーテキストを含むテキスト入力やラジオボタンなどの各要素の横にスパンタグを付け、各スパンを非表示にするようにスタイルを設定するように指示されました。送信ボタンが押されると、スクリプトはテキストを表示するために適切なスパンのスタイルを可視に変更することになっています。私はこれのためのコードを書いたが、私が抱えている問題は私のスパンのエラーが見えるようになることですが、ほとんど瞬時に隠れた状態に戻って消えます。何か特別な理由がありますか？

ここにいくつかのコードがあります。

HTML：

< input type="checkbox" name="agree"/> < span id="agreeSpan>Error text< /span> 

CSS：

span { 
color:red; 
font-size:small; 
visibility:hidden; 
} 

とJavaScript：

function validateAgreement() 
    { 

    var agreeBox = document.registration.agree; 
    var agreeSpan = document.getElementById('agreeSpan'); 

    if (!agreeBox.checked) { 
     agreeSpan.style.visibility = 'visible'; 
     return false; 
    } 

私は明らかに何かが足りないのですか？ 1つの特定のスパンをスタイル設定しようとしている可能性はありますか？また、一般的なスパンタグのスタイル属性はこの特定のものを上書きしていますか？

これは新人の質問であれば大変ありがとうございます。私はあなたがそれをid="agreeSpan"されている必要がありますが、あなたはそこにfalseを返し、起こって提出停止するにはid="agreeSpan

Answer 1

を入力したid の周りに終了引用符を逃している、あなたのHTMLコードでJS :)

Answer 2

に新たなんです十分ではありません。それは私が想像するこの機能をどのように呼び出すかによって異なります。

<form action='blah' onsubmit='return validateAgreement();'> 
... 
</form> 

返品にご注意ください。 on送信ハンドラはfalseを返す必要があるため、関数が返す値を返すようにする必要があります。あなたがしたばかりの場合...

<form action='blah' onsubmit='validateAgreement();'> 
... 
</form> 

あなたのフォームは常に提出されます。