表单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不工作

回答

相关问题