表單驗證「自定義」

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（錯誤答案）
注：
- 必須寫在輸入倫敦，繼續
一個如果答案爲真，表單上的文本，輸入和按鈕被隱藏，然後顯示完整文本
B.if答案是錯誤的，文本，輸入和按鈕NOT HIDDEN，s底部形式的文本「錯誤答案」如何

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>