Javascript form validation - Wrong Order

Question

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

Amit · Accepted Answer · 2014-03-25 11:09:06Z

1

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

edited Mar 25, 2014 at 11:09

answered Mar 25, 2014 at 11:02

Amit

15.4k8 gold badges50 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Mann Over a year ago

If I just select 1 radio button and press ok it continues even though I haven't entered anything in the text fields.

Vamsi Krishna Over a year ago

As @Amit Agarwal is attempting to answer your question. I just want to let you know about a standard. Elements cannot share an id. It leads to unexpected behavior, in particular when using javascript. Your radio buttons have same id. Please check that ;)

Chris Mann Over a year ago

I'm sorry but I am quite new and I don't really know what you mean... Oh and thank you Amit it works now! :)

Jebasuthan · Accepted Answer · 2014-03-25 11:13:23Z

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>

Collectives™ on Stack Overflow

Javascript form validation - Wrong Order

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related