フォームonclickが機能しない

Question

私は現在JSを学習しており、フィールドが空であるかどうかを確認するための検証関数を作成しようとしています。送信ボタンをクリックすると、JSコンソールの何かがChromeで表示されますが、何も表示されません。なぜコンソールに何も表示されないのでしょうか？

var field1 = document.getElementById("field1"); 
var field2 = document.getElementById("field2"); 
var submitBtn = document.getElementById("submitBtn"); 

function validate() { 

    if(field1 === "" || field2 === "") { 
     console.log("Make sure all fields have been filled out correctly"); 
    } else { 
     console.log("they are full"); 
    } 
} 


<form action="" action="get"> 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something"/> 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again"/> 
    <input type="submit" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
</form> 

Answer 1

フォームを提出していない場合は、あなたがそれボタン作る代わりに.Submitが

は、次のコードスニペット

var submitBtn = document.getElementById("submitBtn"); 
 

 
function validate() { 
 
var field1 = document.getElementById("field1").value; 
 
var field2 = document.getElementById("field2").value; 
 
    if (field1 === "" || field2 === "") { 
 
    console.log("Make sure all fields have been filled out correctly"); 
 
    } else { 
 
    console.log("they are full"); 
 
    } 
 
}

<form action="" action="get"> 
 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something" /> 
 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again" /> 
 
    <input type="button" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
 
</form>

を確認してください提出するフォームを作る提出作ります

希望します。

Answer 2

フォーム提出はデータをポストバックしてリフレッシュを引き起こし、その前にコンソールログを見ることができないことがあります。

console.logの後にfalseを追加すると、データを取得できます。また、空の条件と比較しながら値を取得するには、elementではなくelement.valueを使用する必要があります。検証が成功したときに提出する場合は、trueを返します。ここ

あなたの例の作業フィドルです：

<form action="" action="get"> 
 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something"/> 
 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again"/> 
 
    <input type="submit" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
 
</form> 
 
<script> 
 
var field1 = document.getElementById("field1"); 
 
var field2 = document.getElementById("field2"); 
 
var submitBtn = document.getElementById("submitBtn"); 
 

 
function validate() { 
 

 
    if(field1.value === "" || field2.value === "") { 
 
     console.log("Make sure all fields have been filled out correctly"); 
 
     return false; 
 
    } else { 
 
     console.log("they are full"); 
 
     return false; 
 
    } 
 
    
 
} 
 

 
</script>