我有这段代码,但它没有验证表格......
请注意,这不是整个页面,只是一个片段。代码应该验证不同的标签,但我不想用html属性来做。它需要在JavaScript中完成......
我的编码在哪里出错了?
//To disable the radio buttons
function disableStuffNo(){
//random comment to post
document.getElementById("tele").disabled = false;
document.getElementById("whatsapp").disabled = false;
//random comment to post
document.getElementById("call").disabled = false;
document.getElementById("email").disabled = false;
}
function disableStuffYes(){
document.getElementById("tele").disabled = true;
//random comment to post
document.getElementById("whatsapp").disabled = true;
document.getElementById("call").disabled = true;
//random comment to post
document.getElementById("email").disabled = true;
}
//To validate the form
function validateForm() {
var a = document.forms["Order"]["Fname"].value;
var b = document.forms["Order"]["Lname"].value;
var c = document.forms["Order"]["topic"].value;
if (a == ""||b == ""||c == "") {
alert("Everything must be filled out");
return false;
}
HTML:
<form name="Order" style="margin-left: auto;margin-right: auto;display:block;" onsubmit="validateForm()">
<fieldset>
<!--random comment so i can post-->
First Name: <input type="text" id="Fname" maxlength="40"<br/><br/>
Last Name: <input type="text" id="Lname" maxlength="40"><br/><br/>
<!--random comment so i can post-->
Occasion: <input type="text" id="topic" max="50"><br/><br/>
Gender:<br/>
Female <input type="radio" id="female" name="gender" value="Female">
<!--random comment so i can post-->
Male <input type="radio" id="male" name="gender" value="Male"><br/>
<!--random comment so i can post-->
You do wish to schedule an appointment to discuss further?
Yes <input type="radio" id="yes" name="answer" value="Yes" checked onclick="disableStuffYes">
<!--random comment so i can post-->
No <input type="radio" id="no" name="answer" value="No"onclick="disableStuffNo;"><br/>
Telephone Number: <input type="text" id="tele" maxlength="20" value="1(876)"><br/>
Through:<br/>
<!--random comment so i can post-->
Whatsapp <input type="radio" id="whatsapp" name="choice" value="Whatsapp">
Call <input type="radio" id="call" name="choice" value="Call">
<!--random comment so i can post-->
Email <input type="radio" id="email" name="choice" value="Email">
<br/>
<br/><br/>
</fieldset>
<fieldset>
<!--random comment so i can post-->
Please indicate the details of your request :)<br/>
<textarea maxlength="1500" rows="20" cols="100">
</textarea><br/>
<!--random comment so i can post-->
<input type="submit" value="Submit">
</fieldset>
</form>
这应该可以帮到你:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Firstname <input type="text" id="fname" maxlength="40"><br>
Lastname <input type="text" id="lname" maxlength="40"><br>
Topic <input type="text" id="topic" maxlength="50"><br>
<button id="testbutton">Check form</button>
<script>
var isFormValid = function() {
var a = document.getElementById("fname").value;
var b = document.getElementById("lname").value;
var c = document.getElementById("topic").value;
if (a == "" || b == "" || c == "") {
alert("Something is missing");
return false;
}
return true;
};
var button = document.getElementById("testbutton");
button.addEventListener("click", function() {
if (isFormValid()) {
console.log("Form is valid");
}
});
</script>
</body>
</html>
它对我来说实际上没有任何问题。我只是复制/粘贴代码,它工作。我建议如下:
1)尝试在关闭body标签之前直接在html中包含javascript代码
<script>
//To validate the form
function validateForm() {
var a = document.forms["Order"]["Fname"].value;
var b = document.forms["Order"]["Lname"].value;
var c = document.forms["Order"]["topic"].value;
if (a == "" || b == "" || c == "") {
alert("Everything must be filled out");
return false;
}
}
</script>
2)如果有效,请检查外部javascript文件的链接是否正确。您可以通过检查元素并检查控制台是否有404错误(“无法找到file.js”)来执行此操作。
因为它对我有用,我真的不认为这是代码错误,可能会成为选项2。