JavascriptがロードされていませんPHPの読み込み前にフォームを検証する

Question

HTMLとJavaScriptのコードを書いていますので、ボタンをクリックする前に入力が満たされているかどうか確認する必要があります。しかし、私はそれらを空白のままにすると、変数を空に渡してPHPページに進みます。 私はいくつかのテストを行いましたが、onClick関数がまったく読み込まれないと結論づけました。 これは、（すべてのCSSのものなし）コードです：

 <div class = "register"> 
    <form action = "register.php" method = "post" name = "reg1" id = "register" onClick = "return validateForm();"> 
     <input type = "text" class = "reg" id = "name" name = "name"/> 
     <div class = "alert" id = "inserthere1"> </div> 
     <input type = "text" class = "reg" id = "surname" name = "surname"/> <div class = "alert" id = "inserthere2"></div> 
     <input type = "text" class = "reg" id = "mail" name = "mail" /><div class = "alert" id = "inserthere3"></div> 
     <input type = "submit" value = "Join!" > 
     </form> 
    </div> 

    <script language = "JavaScript"> 
    function validateForm() { 
     var n = document.getElementById("name").value; 
     var c = document.getElementById("surname").value; 
     var m = document.getElementById("mail").value; 
     alert("Nome:"+n+"Cognome:"+c+"Mail:"+m); 
     document.getElementById("inserthere1").innerHTML = (n===null || n==="" ? '<i> This cannot be left empty. </i>' : ''); 
     document.getElementById("inserthere2").innerHTML = (c===null || c==="" ? '<i> This cannot be left empty. </i>' : ''); 
     document.getElementById("inserthere3").innerHTML = (m===null || m==="" ? '<i> This cannot be left empty. </i>' : ''); 
     if (n===null || c===null || n==="" || c==="" || m===null || m==="") 
     return false; 
     } 
     return true; 
     } 

Answer 1

だからあなたがフィールドを進める前に記入されているを確認するに使用してみては？あなたは使用することができます。

<input required=""> 

、ユーザが必要=「」、または彼らのブラウザは彼らがフォームを送信させませんでフィールドを記入する必要がありますこのように。

Answer 2

あなたが提出したイベントにのpreventDefaultを使用するか、代わりに入力し、ボタンを使用する必要があり、その後、あなたが使用する必要がありますボタンのonclickイベントです。入力が満たされているかどうかを検証するフォームにはなりません。

あなたはあなたがこれを使用することができ、フォームを検証した後、フォームアクションスクリプトにフォームデータを送信します

document.getElementById("myForm").submit();

提出します。

参考：preventDefault Documentation | W3CSchools

Ref2の：Form Submit method | W3CSchools

Answer 3

<form>..</form> 
document.addEventListener('click', validateForm, false); 
<script language = "JavaScript"> 
    function validateForm() { 
    .. 
</script>