Question

我有一些代码，我一直有一些问题。出于某种原因，它会在检查文本字段之前检查是否先选择了单选按钮。但是，我需要它反过来。我是Javascript的新手所以任何帮助将不胜感激。这是我的代码：

<html>
 <head>
  <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.number.value.length!="4") {
       msg+="You must enter your exam number and it must be 4 digits long \n";
       document.ExamEntry.number.focus();
       document.getElementById('number').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;
     }
     else {
       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="number">Exam Number</td>
    <td><input type="text" name="number" /></td>
    </tr>
    <tr>
    <td><input type="radio" id="examtype" name="examtype" value="GCSE">GCSE<br></td>
    <td><input type="radio" id="examtype" name="examtype" value="AS">AS<br></td>
    <td><input type="radio" id="examtype" name="examtype" value="A2">A2</td>
    </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>

如果我没有这段代码

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?');
         }

然后它运作正常。

任何帮助都很棒：）

Answer 1

使用此

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.number.value.length!="4") {
       msg+="You must enter your exam number and it must be 4 digits long \n";
       document.ExamEntry.number.focus();
       document.getElementById('number').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)
     {
         msg+='Please choose an option';
         result= false;
     }     
     if(msg==""){
        return confirm('You have chosen '+checked.value+' is this correct?');
     }
     else {
       alert(msg);
       return result;
     }
   }

DEMO

Updated Demo

Answer 2

请尝试更新的来源。

<html>
 <head>
  <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;
    return false;
     } else if (document.ExamEntry.subject.value==""){
        msg+="You must enter the subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    return false;
     } else if (document.ExamEntry.number.value.length!="4") {
        msg+="You must enter your exam number and it must be 4 digits long \n";
        document.ExamEntry.number.focus();
        document.getElementById('number').style.color="red";
        result = false;
    return 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;
     }
     else {
       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="number">Exam Number</td>
    <td><input type="text" name="number" /></td>
    </tr>
    <tr>
    <td><input type="radio" id="examtype" name="examtype" value="GCSE">GCSE<br></td>
    <td><input type="radio" id="examtype" name="examtype" value="AS">AS<br></td>
    <td><input type="radio" id="examtype" name="examtype" value="A2">A2</td>
    </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>

Javascript表单验证 - 错误的订单

2 个答案: