我正在处理一个需要验证的简单表单，我不知道为什么我无法开始。我在网上查看了许多非常相似的例子，但我无法使其工作
这是HTML脚本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A BSL Quiz</title>
<link rel="stylesheet" type="text/css" href="./A BSL Quiz_files/bsl-QUIZ.css">
<script type="text/javascript" src="./A BSL Quiz_files/validate-QUIZ.js.download"></script>
</head>
<body>
<div id="content">
<h1>Sign Language</h1>
<div id="quiz">
<form onsubmit="return validate();" method="post" action="(link deleted)">
<h2>A Simple Quiz</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="UserInfo" size="40">
</div>
</fieldset>
<fieldset>
<legend>The questions</legend>
<ol>
<li>
<p id="Q1">What does this message spell?</p>
<div>
<img src="./A BSL Quiz_files/H.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/E.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/L.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/L.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/O.png" height="100" width="100" alt="A BSL sign">
<br>
<select name="Q1">
<option value="">Choose one from the following:</option>
<option value="a">Happy</option>
<option value="b">Hoppy</option>
<option value="c">Hello</option>
<option value="d">Cello</option>
</select>
</div>
</li>
<li>
<p id="Q2">Which TWO of the following statements are TRUE?</p>
<div>
<input type="checkbox" name="Q2a" id="Q2a"> <label for="Q2a">a) Another word for fingerspelling is <b>dactylogy</b></label><br>
<input type="checkbox" name="Q2b" id="Q2b"> <label for="Q2b">b) The first known school for the deaf was founded in 1670</label><br>
<input type="checkbox" name="Q2c" id="Q2c"> <label for="Q2c">c) Sign languages are also used by hearing individuals</label><br>
<input type="checkbox" name="Q2d" id="Q2d"> <label for="Q2d">d) There are only 142 sign languages that exist worldwide</label>
</div>
</li>
<li>
<p id="Q3">Which of these images correctly shows the sign for the letter I (India)?</p>
<div>
<input type="radio" name="Q3" id="Q3a" value="a"> <label for="Q3a">a) <img src="./A BSL Quiz_files/O.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3b" value="b"> <label for="Q3b">b) <img src="./A BSL Quiz_files/I.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3c" value="c"> <label for="Q3c">c) <img src="./A BSL Quiz_files/A.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3d" value="d"> <label for="Q3d">d) <img src="./A BSL Quiz_files/U.png" height="100" width="100" alt="A BSL sign"></label>
</div>
</li>
<li>
<p id="Q4">BANZL is the acronym for which sign language family?</p>
<div>
<input type="text" name="Q4" size="40">
</div>
</li>
</ol>
<input type="hidden" name="thisScore">
</fieldset>
<fieldset>
<legend>Submit your answers</legend>
<div>
<input type="submit" value="Submit"> or <input type="reset" value="Reset">
</div>
</fieldset>
</form>
</div>
<div id="footer">
<p>Answers can be found at <a href="https://en.wikipedia.org/wiki/Sign_language">Wikipedia</a></p>
</div>
</div>
</body></html>
以下是我在JavaScript文件中所做的事情：
var invalid = 0;
function validate(){
invalid = 0;
if (document.getElementById("UserInfo").value == ""){
alert('Name cannot be empty!');
invalid+=1;
}
if(invalid != 0){
return false;
}
else {
return true;
}
}
变量＆＃34;无效的原因＆＃34;是我将添加许多if语句并为每一个使用变量
我做错了什么？
答案 0 :(得分：1)
问题是您的ID位置id="UserInfo"它不应该在段落标记
<p id="UserInfo">What is your name?</p>
它应该在输入标签
中 <input type="text" id="UserInfo" name="UserInfo" size="40">
答案 1 :(得分：-2)
你在语义上返回了错误的结果，它应该是
if(invalid != 0){
return true;
}
else {
return false;
}
并且id应该在input上p，而不是<input type="text" id="UserInfo" size="40">。
var invalid;
function validate() {
invalid = false;
if (document.getElementById("UserInfo").value == "") {
alert('Name cannot be empty!');
invalid = true;
}
return !invalid;
}
使用更好的方法找到下面的工作示例
<div id="content">
<h1>Sign Language</h1>
<div id="quiz">
<form onsubmit="return validate();" method="post" action="(link deleted)">
<h2>A Simple Quiz</h2>
<fieldset>
<legend>About You</legend>
<p>What is your name?</p>
<div>
<input type="text" id="UserInfo" name="UserInfo" size="40">
</div>
</fieldset>
<fieldset>
<legend>The questions</legend>
<ol>
<li>
<p id="Q1">What does this message spell?</p>
<div>
<img src="./A BSL Quiz_files/H.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/E.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/L.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/L.png" height="100" width="100" alt="A BSL sign">
<img src="./A BSL Quiz_files/O.png" height="100" width="100" alt="A BSL sign">
<br>
<select name="Q1">
<option value="">Choose one from the following:</option>
<option value="a">Happy</option>
<option value="b">Hoppy</option>
<option value="c">Hello</option>
<option value="d">Cello</option>
</select>
</div>
</li>
<li>
<p id="Q2">Which TWO of the following statements are TRUE?</p>
<div>
<input type="checkbox" name="Q2a" id="Q2a"> <label for="Q2a">a) Another word for fingerspelling is <b>dactylogy</b></label><br>
<input type="checkbox" name="Q2b" id="Q2b"> <label for="Q2b">b) The first known school for the deaf was founded in 1670</label><br>
<input type="checkbox" name="Q2c" id="Q2c"> <label for="Q2c">c) Sign languages are also used by hearing individuals</label><br>
<input type="checkbox" name="Q2d" id="Q2d"> <label for="Q2d">d) There are only 142 sign languages that exist worldwide</label>
</div>
</li>
<li>
<p id="Q3">Which of these images correctly shows the sign for the letter I (India)?</p>
<div>
<input type="radio" name="Q3" id="Q3a" value="a"> <label for="Q3a">a) <img src="./A BSL Quiz_files/O.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3b" value="b"> <label for="Q3b">b) <img src="./A BSL Quiz_files/I.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3c" value="c"> <label for="Q3c">c) <img src="./A BSL Quiz_files/A.png" height="100" width="100" alt="A BSL sign"></label>
<input type="radio" name="Q3" id="Q3d" value="d"> <label for="Q3d">d) <img src="./A BSL Quiz_files/U.png" height="100" width="100" alt="A BSL sign"></label>
</div>
</li>
<li>
<p id="Q4">BANZL is the acronym for which sign language family?</p>
<div>
<input type="text" name="Q4" size="40">
</div>
</li>
</ol>
<input type="hidden" name="thisScore">
</fieldset>
<fieldset>
<legend>Submit your answers</legend>
<div>
<input type="submit" value="Submit"> or <input type="reset" value="Reset">
</div>
</fieldset>
</form>
</div>
<div id="footer">
<p>Answers can be found at <a href="https://en.wikipedia.org/wiki/Sign_language">Wikipedia</a></p>
</div>
</div> //Draw Borders around our Controls
private void Form1_Paint(object sender, PaintEventArgs e)
{
//Loops through all our text boxes and draws a border
//Works fine when the textbox is just in the form.
foreach (TextBox txt in this.Controls.OfType<TextBox>())
{
Rectangle rect = new Rectangle(txt.Location.X, txt.Location.Y, txt.ClientSize.Width, txt.ClientSize.Height);
rect.Inflate(1, 1);
ControlPaint.DrawBorder(e.Graphics, rect, Color.FromArgb(255, 0, 0), ButtonBorderStyle.Solid);
}
//Loops through all Panels and draws a border
foreach (Panel pnl in this.Controls.OfType<Panel>())
{
Rectangle rect = new Rectangle(pnl.Location.X, pnl.Location.Y, pnl.ClientSize.Width, pnl.ClientSize.Height);
rect.Inflate(1, 1);
ControlPaint.DrawBorder(e.Graphics, rect, Color.FromArgb(0, 0, 0), ButtonBorderStyle.Solid);
//Loops through all our TextBoxes in the Panels and draws a border
//Not drawing the border around the textbox
foreach (TextBox txt in pnl.Controls.OfType<TextBox>())
{
rect = new Rectangle(txt.Location.X, txt.Location.Y, txt.ClientSize.Width, txt.ClientSize.Height);
rect.Inflate(1, 1);
ControlPaint.DrawBorder(e.Graphics, rect, Color.FromArgb(255, 0, 0), ButtonBorderStyle.Solid);
txt.Text = "FML"; //Just added this to see if we were interacting with each TextBox, and we are.
}
}
//To simplify the nested loop above I tried to just draw a border directly to textBox2, which is inside a Panel.
Rectangle rect2 = new Rectangle(textBox2.Location.X, textBox2.Location.Y, textBox2.ClientSize.Width, textBox2.ClientSize.Height);
rect2.Inflate(1, 1);
ControlPaint.DrawBorder(e.Graphics, rect2, Color.FromArgb(255, 0, 0), ButtonBorderStyle.Solid);
textBox2.Text = "Hello World"; //Still changing the text, just no border.
}