表單onclick不工作

我目前正在學習JS，並試圖創建一個驗證函數，以查看字段是否爲空。當我點擊提交按鈕時，我希望在Chrome的JS控制檯中看到一些東西，但我什麼都看不到。爲什麼這不會在控制檯中回顯任何內容？表單onclick不工作

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>

來源

2017-04-13 Trenton Tyler

你需要確保你的JS來到你的HTML後。所有的JS應該直接在標籤之上。 – mawburn

處理JavaScript時，這些元素還不存在。 – David

啊，把它們放在身體下面？ –

如果沒有提交表單讓你只是讓一個按鈕而不是提交.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>

形式

希望它有幫助

來源

2017-04-13 21:04:14 Geeky

但是，如果驗證函數通過我想要提交表單？ –

您可以使功能，如果它通過驗證表單提交...如果你不想讓頁面重新加載使它只是鍵入=「按鈕」或者只是保持爲「提交」 – Geeky

只測試你的代碼它生成第一條消息。 'var field1'和'var field2'應該在驗證函數中定義，否則它將一直這樣做 –

表單提交將發回數據導致刷新，您可能無法在此之前看到控制檯日誌。

在console.log後添加返回false以捕獲數據。此外，您需要使用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>

來源

2017-04-13 21:14:14 Ashirvad

表單onclick不工作

回答

相關問題