Reputation: 1

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

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.

Upvotes: 0

Answers (3)

Devasish

Reputation: 1957

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

Upvotes: -1

sheshadri

Reputation: 1217

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>

Upvotes: 1

sheshadri

Reputation: 1217

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

Upvotes: 1

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

Answers (3)

Related Questions