[英]show alert when textbox input is empty
I want to show an alert when the text box input of the first name is empty.我想在名字的文本框输入为空时显示警报。
Javascript Code Javascript代码
<script>
function validation() {
var fname = document.getElementByID("fname").value;
if ( fname== "")
alert("Enter First Name");
}
</script>
HTML Code HTML代码
<form>
First name:
<input type="text" id="fname">
<br/><br/>
<button id="btnSubmit" onclick="validation()">Submit</button>
<button id="btnReset">Reset</button><br/>
<button id="btnMenue"><a href= "index.php">Menue</a></button>
</form>
I have tried related articles but they didn't solve my problem.我已经尝试过相关文章,但它们并没有解决我的问题。
Two issues in your code:您的代码中有两个问题:
getElementByID
should be getElementById
getElementByID
应该是getElementById
preventDefault
on it to stop the default behaviour that is stop form submission.preventDefault
以停止停止表单提交的默认行为。 function validation(e) { var fname = document.getElementById("fname").value; // Typo here ID should be Id. if (fname == "") { e.preventDefault(); alert("Enter First Name"); } }
<form> First name: <input type="text" id="fname"><br/><br/> <button id="btnSubmit" onClick="validation(event)">Submit</button> <button id="btnReset">Reset</button><br/> <button id="btnMenue"><a href= "index.php">Menue</a></button> </form>
document.getElementByID is not a function
, you have a type in your code: document.getElementByID is not a function
,您的代码中有一个类型:
getElementByID
<- last letter is big in you code, should be small getElementById
getElementByID
<- 最后一个字母在你的代码中很大,应该很小getElementById
working example工作示例
function validation() { // big D, throws error // var fname = document.getElementByID("fname").value; var fname = document.getElementById("fname").value; console.log(fname); if (fname == "") alert("Enter First Name"); }
<form> First name: <input type="text" id="fname"><br/><br/> <button id="btnSubmit" onclick="validation()">Submit</button> <button id="btnReset">Reset</button><br/> <button id="btnMenue"><a href= "index.php">Menue</a></button> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.