Form validation in javaScript not working

Question

I am trying to validate the form using javascript, but I'm unable to get correct output. I have done everything correctly, but I don't know what the problem is with my code. following is the program. Insert title here function formValid() {

 var fname=document.getElementsByName("fname").value;
 var lname=document.getElementsByName("lname").value;
 var uid=document.getElementsByName("uid").value;
 var pass=document.getElementsByName("pass").value;
 var ftype=document.getElementsByName("ftype").value;
 var dep=document.getElementsByName("dep").value;
 var mnum=document.getElementsByName("mnum").value;
 var cpass=document.getElementsByName("cpass").value;
 var email=document.getElementsByName("email").value;

 if(fname==null && lname==null)
    {
        alert("Enter Your name ");
        return false;
    }

 if(uid==null)
    {
        alert("Enter your user ID");
        return false;
    }
 if(pass==null && cpass==null)
 { 
    alert("Enter password");
    return false;
 }
     if(pass!=cpass)
    {
        alert("Password doesnt match");
        return false;
    }
    if(ftype==null)
    {
        alert("Select faculty type");
        return false;

    }
  if(dep==null)
    {
        alert("select department ");
        return false;

    }
  if(mnum==null)
    {
        alert("Enter your Mobile number");
        return false;
    }

   if(email==null)
        {
    alert("Enter your email number");
    return false;
    }

     }
      </script>
      <center>
      <font size="6%" >Collage Managment System</font>

  <hr width="90%">
  <form  action="Form" method="post" name="myForm" onsubmit="return formValid();">

    <div id=container>
    <table>
    <tr><td>
    First Name</td><td>:<input type="text" name="fname">
    </td></tr>
    <tr><td>
    Last Name</td><td>:<input type="text" name="lname">
    </td></tr>
    <tr><td>
    User ID</td><td>:<input type="text" name="uid">
    </td></tr>
    <tr><td>
    Password</td><td>:<input type="password" name="pass">
    </td></tr>
    <tr><td>
    Confirm Password</td><td>:<input type="password" name="cpass">
    </td></tr>

    <tr><td>
    Faculty Type</td><td>:<select  name="ftype">
                            <option>Select</option>
                            <option>HOD</option>
                            <option>Assistant Proffesor</option>
                        </select>
    </td></tr>

    <tr><td>
    Deparment</td><td>:<select name="dep">
                            <option>Select</option>
                            <option>CSE</option>
                            <option>EC</option>
                            <option>ME</option>
                            <option>CIVIL</option>

                        </select>
    </td></tr>
    <tr><td>
    Mobile Number</td><td>:<input type="text" name="mnum">
    </td></tr>
    <tr><td>
    E-mail</td><td>:<input type="text" name="email">
    </td></tr>

    </table>
    <input type="reset" value="reset"><input type="submit" value="Register" >

    </div>  
     </form>
  </center>
      </body>
      </html>

In the above code in javascript if the first condition is executed when the data is empty, but the problem is that when I enter something in the text box it is still showing the alert. Check and tell me my mistake.... Thanks

Answer 1

@Saleem You need following changes in your markup and script

• fname will be nodeList Object since you are using getElementsByName use nodeList index to get value of individual node object or input text element in your case.

  var fname = document.getElementsByName("fname")[0].value;
  

• Only you need to add fname == "" this will check value of text field or dropdown is blank or not in addition to fname == null

  if ((fname == null || fname == "") && (lname == null || lname == "")) {
    alert("Enter Your name ");
    return false;
  

  }

• To get value of dropdown element you should adopt below changes to your script and html

  var ftype =document.getElementsByName("ftype")[0][document.getElementsByName("ftype")[0].selectedIndex].value;
  

• Add option values for dropdown elements:

                <select name="ftype">
                      <option value="">Select</option>
                      <option value="HOD">HOD</option>
                      <option value="Assistant Proffesor">Assistant Proffesor</option>
               </select>
  

               <select name="dep">
                      <option value="">Select</option>
                      <option value="CSE">CSE</option>
                      <option value="EC">EC</option>
                      <option value="ME">ME</option>
                      <option value="CIVIL">CIVIL</option>
              </select>
  

See complete working example on JSFiddle http://jsfiddle.net/aaadesh/RaXZA/

Answer 2

getElementsByName Returns the array of elements whoose name is specified as argument

So you have to specify index to use the value.

For ex :

var ele  = document.getElementsByName("fname");
//ele[0] is the first element
// and its value is ele[0].value 

However getElementsByName may not be supported in older browsers

Answer 3

The getElementsByName() function returns a NodeList object. You can't directly fetch the value from that object. Instead:

var fname=document.getElementsByName("fname")[0].value;

If you're not 100% sure that the named elements exist, you want to make sure that the value returned — the NodeList, that is — really has one element in it:

var list = document.getElementsByName("fname");
var fname = list.length == 1 ? list[0] : null;