当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Need help checking verification of radio buttons JavaScript

问题描述:

I am doing a GCSE computing coursework task and I am trying to get the validation right on a set of 3 radio buttons however the code for the radio buttons (which I copy and pasted from an external source that I do not remember now) however this copy and pasted code seems to override the validation for the other fields (Two text input fields and a number input field) The code is shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Exam Entry</title>

<script language="javascript"" type="text/javascript">

function validateForm() {

var result = true;

var msg="";

if (document.ExamEntry.name.value=="") {

msg+="You must enter your name \n";

document.ExamEntry.name.focus();

document.getElementById('name').style.color="red";

result = false;

}

if (document.ExamEntry.subject.value=="") {

msg+="You must enter the subject \n";

document.ExamEntry.subject.focus();

document.getElementById('subject').style.color="red";

result = false;

}

if (document.ExamEntry.examnumber.value=="") {

msg+="You must enter the exam number \n";

document.ExamEntry.examnumber.focus();

document.getElementById('examnumber').style.color="red";

result = false;

}

if (document.ExamEntry.examnumber.value.length!=4) {

msg+="Your exam number must be exactly 4 digits \n";

document.ExamEntry.examnumber.focus();

document.getElementById('examnumber').style.color="red";

result = false;

}

var checked = null;

var inputs = document.getElementsByName('examtype');

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].checked) {

checked = inputs[i];

break;

}

}

if(checked==null)

{

alert('Please choose an option');

return false;

}

else{

return confirm('You have chosen '+checked.value+' is this correct?');

}

if(msg==""){

return result;

}

{

alert(msg)

return result;

}

}

</script>

</head>

<body>

<h1>Exam Entry Form</h1>

<form name="ExamEntry" method="post" action="success.html">

<table width="50%" border="0">

<tr>

<td id="name">Name</td>

<td><input type="text" name="name" /></td>

</tr>

<tr>

<td id="subject">Subject</td>

<td><input type="text" name="subject" /></td>

</tr>

<tr>

<td id="examnumber">Exam Number</td>

<td><input type="number" name="examnumber" size="4" maxlength="4"></td>

</tr>

<tr>

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br/>

<input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br/>

<input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br/>

</tr>

<tr>

<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>

<td><input type="reset" name="Reset" value="Reset" /></td>

</tr>

</table>

</form>

</body>

</body>

</html>

网友答案:

You still had quite some errors in the HTML document:

  • duplicate ID's
  • unclosed <input> tags
  • missing 'else' in javascript
  • duplicate </body> tag
  • extra double quotes in <script> tag

I fixed these. I also moved the alert of your msg variable above the check for the options, so that they don't interfere with each other. In order to get the first field to focus instead of the last in line, I've added a check to see if result is still true:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>

    <script language="javascript" type="text/javascript">

        function validateForm() {
            var result = true;
            var msg="";

            if (document.ExamEntry.name.value=="") {
                msg+="You must enter your name \n";
                if(result) document.ExamEntry.name.focus();
                document.getElementById('name').style.color="red";
                result = false;
            }

            if (document.ExamEntry.subject.value=="") {
                msg+="You must enter the subject \n";
                if(result) document.ExamEntry.subject.focus();
                document.getElementById('subject').style.color="red";
                result = false;
            }

            if (document.ExamEntry.examnumber.value=="") {
                msg+="You must enter the exam number \n";
                if(result) document.ExamEntry.examnumber.focus();
                document.getElementById('examnumber').style.color="red";
                result = false;
            }

            if (document.ExamEntry.examnumber.value.length!=4) {
                msg+="Your exam number must be exactly 4 digits \n";
                if(result) document.ExamEntry.examnumber.focus();
                document.getElementById('examnumber').style.color="red";
                result = false;
            }

            if(msg != ""){
                alert(msg);
                return result;
            }

            var checked = null;
            var inputs = document.getElementsByName('examtype');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked) {
                    checked = inputs[i];
                    break;
                }
            }

            if(checked==null) {
                alert('Please choose an option');
                return false;
            }
            else {
                return confirm('You have chosen '+checked.value+' is this correct?');
            }

        }
    </script>
</head>

    <body>
        <h1>Exam Entry Form</h1>
        <form name="ExamEntry" method="post" action="success.html">
          <table width="50%" border="0">
                    <tr>
                                    <td id="name">Name</td>
                                    <td><input type="text" name="name" /></td>
                    </tr>
                    <tr>
                                    <td id="subject">Subject</td>
                                    <td><input type="text" name="subject" /></td>
                    </tr>
                    <tr>
                                    <td id="examnumber">Exam Number</td>
                                    <td><input type="text" name="examnumber" size="4" maxlength="4"/></td>
                    </tr>
                    <tr>
                                    <td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
                                    <input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
                                    <input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
                    </tr>
                    <tr>
                                    <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
                                    <td><input type="reset" name="Reset" value="Reset" /></td>
                    </tr>
            </table>
        </form>
    </body>
</html>
分享给朋友:
您可能感兴趣的文章:
随机阅读: