フォームの検証 "カスタムが必要"

Question

このコードを修正するには？

function shw() { 
 
    document.getElementById('done').style.display = "block"; 
 
}

<form name="validation" action=""> 
 
<p>what is the capital of England ?</p> 
 
<p>A.London<br>B.Manchester</p> 
 
<input type="text" id="answer" required> 
 
<button type="submit" value="submit" onclick="shw()">Submit</button> 
 
<!-- If Asnwer is true --> 
 
<!-- All content in form is HIDDEN (Text,input and button), then, show this --> 
 
<div id="done" style="display:none;" class="answer_list" >Answer Is True</div> 
 

 
<!-- If Asnwer is wrong/ --> 
 
<!-- All content in form NOT HIDDEN, then, show this in bottom form --> 
 
<div id="done" style="display:none;" class="answer_list" >Answer Is Wrong</div> 
 
</form>

例の画像： http://www112.zippyshare.com/v/CKwyAAiM/file.html（真回答）
例イメージ： http://www112.zippyshare.com/v/Lx7TvOwp/file.html（間違った回答）
注：

Aを継続するために、入力にロンドンを書く-Must 。答えが真であれば、テキスト、入力、フォーム上のボタンは隠され、完全なテキストが表示されます。
B.if答えは間違っています、テキスト、入力とボタンは隠しではありません下のフォームのテキスト「間違った回答」

Answer 1

以下のサンプルコードで検証を行います。すべてのチェックと質問は、入力した例に基づいてハードコードされています。 JapanGuyがコメントで示したように、あなたは答えを確認する安全な方法を使用する必要があります。

<form name="validation" action="" id="formName"> 
    <div id="question"> 
     <p>what is the capital of England ?</p> 
     <p>A.London<br>B.Manchester</p> 
     <input type="text" id="answer" required> 
     <button type="submit" value="submit">Submit</button> 
    </div>  

    <!-- If Asnwer is true --> 
    <!-- All content in form is HIDDEN (Text,input and button), then, show this --> 
    <div id="correct" style="display:none;" class="answer_list" >Answer Is True</div> 

    <!-- If Asnwer is true */ --> 
    <!-- All content in form NOT HIDDEN, then, show this in bottom form --> 
    <div id="wrong" style="display:none;" class="answer_list" >Answer Is Wrong</div> 
</form> 

<script> 
    var form = document.getElementById("formName"); 
    form.addEventListener("submit", shw, true); 

    function shw(event) { 
     event.preventDefault(); 

     if (document.getElementById("answer").value == "London") 
     { 
      document.getElementById("question").style.display = "none"; 
      document.getElementById('correct').style.display = "block"; 
      document.getElementById('wrong').style.display = "none"; 
      return true; 
     } 
     else 
     { 
      document.getElementById('correct').style.display = "none"; 
      document.getElementById('wrong').style.display = "block"; 
      return false; 
     } 
    } 
</script>