JavaScript関数を使用したフォームの検証

Question

JavaScript関数を使用してフォームを検証しようとしています。私はそれが動作すると思うが、出力はほとんど直ちに消える。ここで

は、関連するコードです：屋の少年たちが何を考えて

<form name="myForm"> 
    Your Age: <input type="text" name="age"> 
    <input type="submit" value=" Send " id="submit"> 
</form> 



document.getElementById("submit").addEventListener("click", validate); 

function validate() { 

    var x = document.forms["myForm"]["age"].value; 

    if (x > 0) { 
     document.getElementById("demo").innerHTML = "Congrats you have entered x, your answer has been submitted"; 
    } 
    else { 
     document.getElementById("demo").innerHTML = "ERROR: Please enter a valid age"; 
     return false; 
    } 

} 

？

Answer 1

event引数をvalidateに設定してデフォルトの動作を防止し、デフォルト動作を防止するためには.preventDefault();を使用する必要があります。

条件が満たされた場合は、submit()関数を使用してJavaScript経由でフォームを送信してください。
actionとmethodを追加するか、ajaxを使用してください。

document.getElementById("submit").addEventListener("click", validate); 
 

 
function validate (e) { 
 
    e.preventDefault(); 
 
    var x = document.forms["myForm"]["age"].value; 
 

 
    if (x > 0) { 
 
     document.getElementById("demo").innerHTML = "Congrats you have entered x, your answer has been submitted"; 
 
     //submit your form here by using formelement.submit(); 
 
    } 
 
    else { 
 
     document.getElementById("demo").innerHTML = "ERROR: Please enter a valid age"; 
 
     return false; 
 
    } 
 

 
}

<form name="myForm"> 
 
    Your Age: <input type="text" name="age"> 
 
    <input type="submit" value=" Send " id="submit"> 
 
</form> 
 
<div id="demo"></div>