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

Question

I'm working on a simple form that needs to be validated and I have no idea why I cannot make a start. 我正在处理一个简单的表单，需要进行验证，而且我不知道为什么无法开始。 I looked at many examples online which are very similar and yet I cant make it work 我在网上看了很多非常相似的例子，但我无法使它工作

Here's the HTML script: 这是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>

Here is what I've done in my JavaScript file: 这是我在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;
    }


}

The reason for the variable "invalid" is that I will add many if statements and use the variable for each one 变量“无效”的原因是，我将添加许多if语句，并为每个变量使用该变量

What am I doing wrong?? 我究竟做错了什么？？

Answer 1

Problem is your id placement id="UserInfo" it should not in paragraph tag 问题是您的ID位置id="UserInfo" ，不应放在段落标记中

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

it should in input tag 它应该在输入标签中

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

Answer 2

you are returning wrong result semantically, it should be 您从语义上返回错误的结果，应该是

if(invalid != 0){
return true;
}

else {
return false;
}

And id should be on input from which you are getting value not on p . id应该是从中获取价值的input ，而不是p 。

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

find working example below with bit better approach 在下面找到更好的方法的工作示例

 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>

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

问题描述

2 个解决方案

解决方案1
1 2018-04-01 19:10:31

解决方案2
-2 2018-04-01 19:08:44

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

问题描述

2 个解决方案

解决方案1 1 2018-04-01 19:10:31

解决方案2 -2 2018-04-01 19:08:44

解决方案1
1 2018-04-01 19:10:31

解决方案2
-2 2018-04-01 19:08:44