CODEWITHSUNDEEP
javascript
Chris Mann
Chris Mann

Reputation: 48

Javascript form validation - Wrong Order

I have some code that I have been having some issues with. For some reason, it checks whether the radio buttons are selected first before it checks the text fields. However, I need it to be the other way around. I am new to Javascript so any help would be appreciated. Here is my code:

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

If I do not have this bit of code

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

then it works fine.

Any help is great :)

Upvotes: 0

Views: 359

Answers (2)

Jebasuthan
Jebasuthan

Reputation: 5604

Please try the updated source. 

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

Upvotes: 0

Amit
Amit

Reputation: 15387

Use this

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

Upvotes: 1

Related Questions