Question

我正在处理一个需要验证的简单表单，我不知道为什么我无法开始。我在网上查看了许多非常相似的例子，但我无法使其工作

这是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语句并为每一个使用变量

我做错了什么？

Answer 1

问题是您的ID位置id="UserInfo"它不应该在段落标记

中

<p id="UserInfo">What is your name?</p>

它应该在输入标签

中

<input type="text" id="UserInfo" name="UserInfo" size="40">

Answer 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.

    }

使用html和css进行简单表单验证的问题

2 个答案: