How can I validate multiple fields in a form using Javascript?

Question

I am trying to validate multiple fields in a form.

First off, I do not have any experience in JS but after some research I have put together this code and it works for the most part. If all fields are left blank then my error messages pop up. They also pop up if I start answering the form from the bottom and going up. However, if a value exists in the first field being validated then the whole form is submitted.

I apologize for the extremely long and messy code, I imagine there is many ways I can shorten my code but like I said I do not have much experience.

Below is my Javascript code

     function validateForm() {

  var x = document.forms["myForm"]["flight_num"].value;
  var d = document.forms["myForm"]["date"].value;
  var t = document.forms["myForm"]["time"].value;
  var f = document.forms["myForm"]["friendliness"].value;
  var s = document.forms["myForm"]["storage"].value;
  var c = document.forms["myForm"]["comfort"].value;
  var cl = document.forms["myForm"]["clean"].value;
  var n = document.forms["myForm"]["noise"].value;
if (x == null || x == "") {
   document.getElementById('flighterr').innerHTML="Please enter your flight number.";

if (d == null || d == "") {
     document.getElementById('dateerr').innerHTML="Please enter the date of your flight.";

if (t == null || t == "") {
     document.getElementById('timeerr').innerHTML="Please enter the time of your flight.";

if (f == null || f == "") {
     document.getElementById('frienderr').innerHTML="Please select a choice.";

if (s == null || s == "") {
     document.getElementById('storageerr').innerHTML="Please select a choice.";

if (c == null || c == "") {
     document.getElementById('comforterr').innerHTML="Please select a choice.";

if (cl == null || cl == "") {
     document.getElementById('cleanerr').innerHTML="Please select a choice.";

if (n == null || n == "") {
     document.getElementById('noiseerr').innerHTML="Please select a choice.";
   return false; }
   return false; }
   return false; }
   return false; }
   return false; }
   return false; }
  return false;  }
    return false;}
    }

Here is the updated javascript code

    function validateForm() {

    var validation = [{
    field: "flight_num",
    msg: "Please enter your flight number."
        },
        {
    field: "date",
    msg: "Please enter the date of your flight."
        },
        {
    field: "time",
    msg: "Please enter the time of your flight."
        },
        {
    field: "friendliness",
    msg: "Please select a choice."
        },
        {
    field: "storage",
    msg: "Please select a choice."
       },
       {
    field: "comfort",
    msg: "Please select a choice."
       },
       {
    field: "clean",
    msg: "Please select a choice."
      },
     {
    field: "noise",
    msg: "Please select a choice."
     },
     ];

   var ok = true;

    for( var i = 0; i < validation.length; ++i ) {
        if( !document.getElementById( validation[i].field ).value ) {
     document.getElementById( validation[i].field + 'err' ).innerHTML = validation[i].msg;
    ok = false;
       }
    }

    return ok;   
        }

Below is my html form

   <form name="myForm"  onsubmit="return validateForm()" id="test" method="Post"  action="input.php" >
   <table>

   <tr>
   <td>First Name: </td> <td><input type="text" name="Fname" placeholder="Optional"></td>
   </tr>

   <tr>
   <td>Last Name: </td> <td><input type="text" name="Lname" placeholder="Optional"></td>
   </tr>

   <tr>
   <td>Email: </td> <td><input id="email" type="text" name="email" placeholder="Optional" ><span id="errEmail"></span></td>
   </tr>

   <tr>
   <td>Flight# </td> <td><input id="flight_num"  type="text" name="flight_num"><Span id="star">* </span><span id="flighterr"></span></td>
   </tr>

    <tr>
    <td>Date: </td><td><input id="flight_date" type="text" name="date" placeholder="YYYY-MM-DD" ><Span id="star">* </span><span id="dateerr"></span </td>
    </tr>

     <tr>
     <td>Time: </td><td><input id="time" type="text" name="time" ><Span id="star">* </span><span id="timeerr"></span></td>
     </tr>
     </table>
     </div>

     <div id="div4">
     <table id="choices">
     <tr id="rows">
     <td id="categ" rowspan="2" width="15%"><Span id="star </span>Friendliness of Staff: </td> 
     <td width="15%"><input id="friendliness" type="radio" name="friendliness" value="No opinion"></td>
     <td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Poor" ></td>
     <td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Fair" ></td>
     <td width="15%"><input   id="friendliness" type="radio" name="friendliness" value="Good" ></td>
     <td width="10%"><input  id="friendliness" type="radio" name="friendliness" value="Excellent"></td><td width="20%"><span id="frienderr"></span></td></tr>
    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>

    <tr id="rows">
    <td id="categ" rowspan="2"><Span id="star">* </span>Space for luggage storage: </td>
    <td><input id="storage" type="radio" name="storage" value="No opinion" ></td>
    <td><input  id="storage" type="radio" name="storage" value="Poor"></td>
    <td><input  id="storage" type="radio" name="storage" value="Fair"></td>
    <td><input  id="storage" type="radio" name="storage" value="Good"></td>
    <td><input  id="storage" type="radio" name="storage" value="Excellent"></td>
    <td><span id="storageerr"></span></td> </tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>

    <tr id="rows">
    <td id="categ" rowspan="2"><Span id="star">* </span>Comfort of seating: </td>
    <td><input id="comfort" type="radio" name="comfort" value="No opinion"></td>
    <td ><input id="comfort" type="radio" name="comfort" value="Poor"></td>
    <td><input id="comfort" type="radio" name="comfort" value="Fair"></td>
    <td><input id="comfort" type="radio" name="comfort" value="Good"></td>
    <td><input id="comfort" type="radio" name="comfort" value=" Excellent"></td>
    <td><span id="comforterr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td </tr>

    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Cleanliness of aircraft: </td>
    <td><input id="clean" type="radio" name="clean" value="No opinion" ></td>
    <td><input id="clean" type="radio" name="clean" value="Poor"></td>
    <td><input id="clean" type="radio" name="clean" Value="Fair"></td>
    <td><input id="clean" type="radio" name="clean" value="Good"></td>
    <td><input id="clean" type="radio" name="clean" Value="Excellent"></td>
    <td><span id="cleanerr"></span></td></tr>

    <tr>
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td><td>Excellent</td></tr>

    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Noise level of aircraft: </td>
    <td><input id="noise" type="radio" name="noise" Value="No opinion" ></td>
    <td><input id="noise" type="radio" name="noise" Value="Poor"></td>
    <td><input id="noise" type="radio" name="noise" value="fair"></td>
    <td><input id="noise" type="radio" name="noise" value="Good"></td>
    <td><input id="noise" type="radio" name="noise" value="Excellent"></td>
    <td><span id="noiseerr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr></table>

    <p><Span id="star">*  Required</span></p>

    <div id="div5">
    <table id="button">
    <tr><td><input type="submit" value="Submit"></td><td><input type="reset" value="Clear Data"></td></tr>
    </table>
    </div>
    </form>

Thanks in advance.

you can use jquery.validate plugin to validate. jqueryvalidation.org/documentation — Vel
– Vel, Commented May 19, 2015 at 5:16
I realize many people recommend jquery but I have no clue how to implement it. For the most part I can read Javascript and understand whats happening. — martin
– martin, Commented May 19, 2015 at 5:21
@vel I should mention I am very limited on time and need this by tomorrow, so Im not looking forward to starting from scratch after having invested so much time. — martin
– martin, Commented May 19, 2015 at 5:31

sheshadri · Accepted Answer · 2015-05-19 05:33:38Z

1

This is basic validation i just modified your JavaScript code

$('#btnsub').click(function(){
console.log("DS");
  var x = document.forms["myForm"]["flight_num"].value;
  var d = document.forms["myForm"]["date"].value;
  var t = document.forms["myForm"]["time"].value;
  var f = document.forms["myForm"]["friendliness"].value;
  var s = document.forms["myForm"]["storage"].value;
  var c = document.forms["myForm"]["comfort"].value; 
  var cl = document.forms["myForm"]["clean"].value;
  var n = document.forms["myForm"]["noise"].value;
if (x == null || x == "") {
    alert("Please enter your flight number.");  return false;}

if (d == null || d == "") {
     alert("Please enter the date of your flight.");
 return false;}
if (t == null || t == "") {
     alert("Please enter the time of your flight.");
 return false;}
if (f == null || f == "") {
     alert("Please select a choice.");
 return false;}
if (s == null || s == "") {
    alert("Please select a choice.");
 return false;}
if (c == null || c == "") {
     alert("Please select a choice.");
    return false;}
if (cl == null || cl == "") {
     alert("Please select a choice.");
 return false;}
if (n == null || n == "") {
     alert("Please select a choice.");

   return false; }

    });

This a DEMO page

answered May 19, 2015 at 5:33

sheshadri

1,2159 silver badges21 bronze badges

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

2 Comments

martin Over a year ago

Hey @shri I would like to have the error message show next to each missing field all at once. Also,in your example if all fields are left blank and the form is submitted it only realizes "flight_num" is missing.

sheshadri Over a year ago

Hey i have done using HTML 5 just check it if its fine then accept the answer jsfiddle.net/sheshu036/cbbmeeL9/1

sheshadri · Accepted Answer · 2015-05-20 04:22:41Z

Hey i have done using HTML 5 just check it if its fine then accept the answer DEMO

    <form name="myForm"  onsubmit="return validateForm()" id="test" method="Post"  action="input.php" >
   <table>

   <tr>
   <td>First Name: </td> <td><input type="text" name="Fname" placeholder="Optional" required title="Enter first name"></td>
   </tr>

   <tr>
   <td>Last Name: </td> <td><input type="text" name="Lname" placeholder="Optional" required title="Enter Last name"></td>
   </tr>

   <tr>
   <td>Email: </td> <td><input id="email" type="text" name="email" placeholder="Optional" required title="Enter Email Id"><span id="errEmail" ></span></td>
   </tr>

   <tr>
   <td>Flight# </td> <td><input id="flight_num"  type="text" name="flight_num" required title="Enter Flight No."><Span id="star" >* </span><span id="flighterr"></span></td>
   </tr>

    <tr>
    <td>Date: </td><td><input id="flight_date" type="text" name="date" placeholder="YYYY-MM-DD"required title="Enter Date" ><Span id="star">* </span><span id="dateerr"></span </td>
    </tr>

     <tr>
     <td>Time: </td><td><input id="time" type="text" name="time" required title="Enter Time"><Span id="star" >* </span><span id="timeerr" ></span></td>
     </tr>
     </table>
     </div>

     <div id="div4">
     <table id="choices">
     <tr id="rows">
     <td id="categ" rowspan="2" width="15%"required><Span id="star </span>Friendliness of Staff: </td> <td width="15%"><input id="friendliness" type="radio" name="friendliness" value="No opinion"></td><td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Poor" ></td><td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Fair" ></td><td width="15%"><input   id="friendliness" type="radio" name="friendliness" value="Good" ></td><td width="10%"><input  id="friendliness" type="radio" name="friendliness" value="Excellent"></td><td width="20%"><span id="frienderr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>



     <tr id="rows">
    <td id="categ" rowspan="2" required><Span id="star">* </span>Space for luggage storage: </td><td> 
<input id="storage" type="radio" name="storage" value="No opinion" required title="Select one choice"></td><td><input  id="storage" type="radio" name="storage" value="Poor" ></td><td><input  id="storage" type="radio" name="storage" value="Fair"></td><td><input  id="storage" type="radio" name="storage" value="Good"></td><td><input  id="storage" type="radio" name="storage" value="Excellent"></td><td><span id="storageerr"></span></td> </tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>


    <tr id="rows">
    <td id="categ" rowspan="2"><Span id="star">* </span>Comfort of seating: </td><td><input id="comfort" type="radio" name="comfort" value="No opinion  title="Select one choice"" required></td><td ><input id="comfort" type="radio" name="comfort" value="Poor"></td><td><input id="comfort" type="radio" name="comfort" value="Fair"></td><td><input id="comfort" type="radio" name="comfort" value="Good"></td><td><input id="comfort" type="radio" name="comfort" value=" Excellent"></td><td><span id="comforterr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td </tr>


    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Cleanliness of aircraft: </td><td><input id="clean" type="radio" name="clean" value="No opinion  title="Select one choice"" required ></td><td><input id="clean" type="radio" name="clean" value="Poor"></td><td><input id="clean" type="radio" name="clean" Value="Fair"></td><td><input id="clean" type="radio" name="clean" value="Good"></td><td><input id="clean" type="radio" name="clean" Value="Excellent"></td><td><span id="cleanerr"></span></td></tr>

    <tr>
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td><td>Excellent</td></tr>



    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Noise level of aircraft: </td><td><input id="noise" type="radio" name="noise" Value="No opinion  title="Select one choice"" required ></td><td><input id="noise" type="radio" name="noise" Value="Poor"></td><td><input id="noise" type="radio" name="noise" value="fair"></td><td><input id="noise" type="radio" name="noise" value="Good"></td><td><input id="noise" type="radio" name="noise" value="Excellent"></td><td><span id="noiseerr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr></table>


    <p><Span id="star">*  Required</span></p>

    <div id="div5">
    <table id="button">
    <tr><td><input type="submit" id="btnsub" value="Submit"></td><td><input type="reset" value="Clear Data"></td></tr>
    </table>
    </div>
    </form>

Vel · Accepted Answer · 2018-04-27 09:12:05Z

-1

Just change the logic validateForm() function :

function validateForm(){
    var x = document.forms["myForm"]["flight_num"].value;
    var d = document.forms["myForm"]["date"].value;
    //......so on...//

    var IS_VALID = true; // assume form is valid
    var error_msg = '';

    if (x == NULL || x == "" || x == 'undefined') {
         IS_VALID = false;
         error_msg += "flight num can not be blank";
    }

    if (d == NULL || d == "" || d == 'undefined') {
         IS_VALID = false;
         error_msg += "\ndate can not be blank";
    }

    //......do the same for all the elment


   // finally check if the flag is true or false
    if (IS_VALID === false) {
          alert(error_msg);
    }

    return IS_VALID;
}

edited Apr 27, 2018 at 9:12

Vel

9,4286 gold badges42 silver badges71 bronze badges

answered May 19, 2015 at 5:28

Devasish

1,9574 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

How can I validate multiple fields in a form using Javascript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related