请帮帮我,我卡住了。
为什么下面的 JavaScript 不起作用?该脚本正在检查电话号码和地址是否为空,但是当输入电话号码和地址字段时,警报仍然弹出。
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;
function checkingIsEmpty() {
if (phone == ''){
alert("Please insert your phone number");
return false;
}
if (address ==''){
alert("Please insert your address");
return false;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
最佳答案
我同意@Madara 的评论,你应该......只需在表单输入上添加 required
属性,让浏览器为你完成工作
但是,我相信您的代码无法正常工作的原因是因为您似乎将 phone
和 address
的 const
值设置为进入屏幕...然后您正在检查初始值(而不是最新值)。
作为函数的一部分,您需要从控件获取最新值...
function checkingIsEmpty(){
if (document.getElementById("phoneNumberInput").value == ''){
alert("Please insert your phone number");
return false;
}
if (document.getElementById("addressInput").value ==''){
alert("Please insert your address");
return false;
}
return true;
}
(小修改,你还需要在你的函数结束时return true
,否则你的提交将不起作用)
关于javascript 检查电话号码和地址是否为空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52501472/