JavaScript name validation not working

Question

My JavaScript validation function doesn't seem to be working. The same validation format also doesn't seem to be working for my other inputs eg. last name. However, it does work for my email input. I'm creating a webpage and within the full code, I have this JavaScript function for validating the first name, so that the field isn't empty upon submission.

function validateFName() {

    var firstname = document.getElementById('firstname').value;
    if( firstname==null || firstname=="")
    {
    alert("Please input a first name");
    }
 }

Additionally, below is the input code within the body:

<label> First Name: </label> <input type="text" name="firstname"  maxlength="30" placeholder="John" /> <br><br>

Below is the calling of the function:

<input type="submit" onclick="validateEmail(); validateFName(); validateLName(); validateGender(); validateDate(); validateVName(); validateVEmail();" /> <br>

Below is my full code. (Not yet completed)

<!DOCTYPE html>
<html>
<head>

  <title>  Truth or Dare </title>


  <style type='text/css'>
    body {
  font: 15px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: purple;
}

nav {
width: 360px;
height: 70px;
margin-left: auto;
margin-right: auto;
}

.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}

.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */ 

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}

/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}
h2{
    color: blue;
    font-size: 20px;
}
input {
  padding: 5px;
    font-size: 15px;
    text-shadow: 0px 1px 0px #fff;
    outline: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}

    input:focus {
        border: 1px solid #fafafa;
        -webkit-box-shadow: 0px 0px 6px #007eff;
        -moz-box-shadow: 0px 0px 5px #007eff;
        box-shadow: 0px 0px 5px #007eff;
    }


label{

  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#box {
  width: 430px; margin: 60px auto; padding: 60px 30px;
    background: white; border: 1px solid #e1e1e1;
    -moz-box-shadow: 0px 0px 8px #444;
    -webkit-box-shadow: 0px 0px 8px #444;
}


h1 {
    font-size: 20px; 
    color: #445668; 
    text-transform: uppercase;
    text-align: center; 
    margin: 0 0 35px 0; 
    text-shadow: 0px 1px 0px #f2f2f2;
}
  </style>



<script type='text/javascript'>

function validateEmail() {

    var email = document.getElementById('email').value;
    if( email==null || email=="")
    {
    alert("Please input an email address");
    }
 }

function validateFName() {

    var firstname = document.getElementById('firstname').value;
    if( firstname==null || firstname=="")
    {
    alert("Please input a first name");
    }
 }

    function validateLName() {

    var lastname = document.getElementById('lastname').value;
    if( lastname==null || lastname=="")
    {
    alert("Please input a last name");
    }
 }

        function validateGender() {

    var gender = document.getElementById('gender').value;
    if( gender==null || gender=="")
    {
    alert("Please select a gender");
    }
 }


        function validateDate() {

    var date = document.getElementById('date').value;
    if( date==null || date=="")
    {
    alert("Please select a date");
    }
 }


        function validateVName() {

    var vname = document.getElementById('vname').value;
    if( vname==null || vname=="")
    {
    alert("Please input a victim's name");
    }
 }

 function validateVEmail() {

    var vemail = document.getElementById('vemail').value;
    if( vemail==null || vemail=="")
    {
    alert("Please input a victim's email");
    }
 }

</script>


</head>
<body>
<div id="navi">
  <nav>
<ul class="fancyNav">
         <li id="home"><a href="#home" class="homeIcon">Home</a></li>
         <li id="news"><a href="#truth">TRUTH</a></li>
         <li id="about"><a href="#Dare">DARE</a></li>
     </ul>
  </nav>
  </div>

<div id="box">
<form id="truth">

<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname"  maxlength="30" placeholder="John" /> <br><br>
<label> Last Name: </label> <input type="text" name="lastname"  maxlength="30" placeholder="Doe" /> <br><br>
<label> Email:</label> <input type="text" id="email" /> <br><br>
<label> Male </label><input type="radio" name="gender" value="male"/>
<label> Female </label><input type="radio" name="gender" value="female"/> <br><br>
<label> Date to be performed: </label><input type="date" name="date"/><br><br>
<h2> Victim </h2>
<label> Name: </label>  <input type="text" name="vname"  maxlength="30" /><br><br>
 <label> Email:</label> <input type="text" id="vemail" /> <br><br>


    <h2> Please select a truth questions below </h2> <br>
<input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>

  <input type="radio"  name="truth" value="q2"> Have you ever return too much change? <br>

  <input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>

  <input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>

  <input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>

  <input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>

  <input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>

<input type="submit" onclick="validateEmail(); validateFName(); validateLName(); validateGender(); validateDate(); validateVName(); validateVEmail();" /> <br>
</form>
</div>

</body>


</html>

check this answer

turtle
– turtle

2014-11-07 04:17:37 +00:00
Commented Nov 7, 2014 at 4:17 — turtle
– turtle, Commented Nov 7, 2014 at 4:17
The issue is actually with the id attribute.

Danielle Stewart
– Danielle Stewart

2014-11-07 04:21:33 +00:00
Commented Nov 7, 2014 at 4:21 — Danielle Stewart
– Danielle Stewart, Commented Nov 7, 2014 at 4:21
the only element have id are email and vemail

Edrich
– Edrich

2014-11-07 04:32:37 +00:00
Commented Nov 7, 2014 at 4:32 — Edrich
– Edrich, Commented Nov 7, 2014 at 4:32

benomatis · Accepted Answer · 2014-11-07 05:18:16Z

3

When you say document.getElementById("firstname"), your html tag should be like:

input type="text" id="firstname" name="firstname"

You forgot to give "id" attribute to the element. "name"attribute will be used to get the values on server side when you post/submit the form.

edited Nov 7, 2014 at 5:18

benomatis

5,6537 gold badges39 silver badges61 bronze badges

answered Nov 7, 2014 at 4:15

yeswanth

1,5491 gold badge11 silver badges19 bronze badges

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

Comments

Jaykumar Patel · Accepted Answer · 2014-11-07 04:22:17Z

0

Add id="firstname" to perform work perfectly because is this not exist in input field so can not find getElementById('firstname') not find this element,

<label> First Name: </label> <input type="text" name="firstname"  maxlength="30" placeholder="John" id="firstname"/>

View `jsFiddle`

answered Nov 7, 2014 at 4:22

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Comments

Edrich · Accepted Answer · 2014-11-07 05:54:28Z

0

To be sure, make a habit of adding name and id to your inputs

<input type='text' id='firstName' name='firstName'>

edited Nov 7, 2014 at 5:54

answered Nov 7, 2014 at 4:22

Edrich

2422 silver badges8 bronze badges

2 Comments

benomatis Over a year ago

please remove the part of "if your button is a submit..." because it's not true... if you add return false in your function or e.preventDefault then it will be considered for sure...

benomatis Over a year ago

...and comment here once you changed it and i'll be happy to remove my downvote...

cychoi · Accepted Answer · 2014-11-07 06:28:15Z

Since you specifically tagged html5 validation and based on your validation requirements from your Javascript code, I think using HTML 5 form validation feature would be a better bit for you. Thus, reducing the effort of coding in Javascript.

<!DOCTYPE html>
<html>

<head>
  <title>Truth or Dare</title>
  <style type='text/css'>
    body {
      font: 15px'Lucida Grande', Verdana, sans-serif;
      color: #404040;
      background: purple;
    }
    nav {
      width: 360px;
      height: 70px;
      margin-left: auto;
      margin-right: auto;
    }
    .fancyNav {
      /* Affects the UL element */
      overflow: hidden;
      display: inline-block;
    }
    .fancyNav li {
      /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
      background-color: #f0f0f0;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), color-stop(0.5, #f0f0f0), color-stop(0.51, #e6e6e6));
      background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
      border-right: 1px solid rgba(9, 9, 9, 0.125);
      /* Adding a 1px inset highlight for a more polished efect: */
      box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
      position: relative;
      float: left;
      list-style: none;
    }
    .fancyNav li:after {
      /* This creates a pseudo element inslide each LI */
      content: '.';
      text-indent: -9999px;
      overflow: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      opacity: 0;
      /* Gradients! */
      background-image: -webkit-gradient(linear, left top, right top, from(rgba(168, 168, 168, 0.5)), color-stop(0.5, rgba(168, 168, 168, 0)), to(rgba(168, 168, 168, 0.5)));
      background-image: -moz-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image: -o-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image: -ms-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      background-image: linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
      /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
      box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -moz-box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -webkit-box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      /* This will create a smooth transition for the opacity property */
      -moz-transition: 0.25s all;
      -webkit-transition: 0.25s all;
      -o-transition: 0.25s all;
      transition: 0.25s all;
    }
    /* Treating the first LI and li:after elements separately */
    .fancyNav li:first-child {
      border-radius: 4px 0 0 4px;
    }
    .fancyNav li:first-child:after,
    .fancyNav li.selected:first-child:after {
      box-shadow: 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -moz-box-shadow: 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      -webkit-box-shadow: 1px 0 0 #a3a3a3, 2px 0 0 #fff;
      border-radius: 4px 0 0 4px;
    }
    .fancyNav li:last-child {
      border-radius: 0 4px 4px 0;
    }
    /* Treating the last LI and li:after elements separately */
    .fancyNav li:last-child:after,
    .fancyNav li.selected:last-child:after {
      box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff;
      -moz-box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff;
      -webkit-box-shadow: -1px 0 0 #a3a3a3, -2px 0 0 #fff;
      border-radius: 0 4px 4px 0;
    }
    .fancyNav li:hover:after,
    .fancyNav li.selected:after,
    .fancyNav li:target:after {
      /* This property triggers the CSS3 transition */
      opacity: 1;
    }
    .fancyNav:hover li.selected:after,
    .fancyNav:hover li:target:after {
      /* Hides the targeted li when we are hovering on the UL */
      opacity: 0;
    }
    .fancyNav li.selected:hover:after,
    .fancyNav li:target:hover:after {
      opacity: 1 !important;
    }
    /* Styling the anchor elements */
    .fancyNav li a {
      color: #5d5d5d;
      display: inline-block;
      font: 20px/1 Lobster, Arial, sans-serif;
      padding: 12px 35px 14px;
      position: relative;
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
      z-index: 2;
      text-decoration: none !important;
      white-space: nowrap;
    }
    .fancyNav a.homeIcon {
      background: url('home.png') no-repeat center center;
      display: block;
      overflow: hidden;
      padding-left: 12px;
      padding-right: 12px;
      text-indent: -9999px;
      width: 16px;
    }
    h2 {
      color: blue;
      font-size: 20px;
    }
    input {
      padding: 5px;
      font-size: 15px;
      text-shadow: 0px 1px 0px #fff;
      outline: none;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #ccc;
      -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
    }
    input:focus {
      border: 1px solid #fafafa;
      -webkit-box-shadow: 0px 0px 6px #007eff;
      -moz-box-shadow: 0px 0px 5px #007eff;
      box-shadow: 0px 0px 5px #007eff;
    }
    label {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    #box {
      width: 430px;
      margin: 60px auto;
      padding: 60px 30px;
      background: white;
      border: 1px solid #e1e1e1;
      -moz-box-shadow: 0px 0px 8px #444;
      -webkit-box-shadow: 0px 0px 8px #444;
    }
    h1 {
      font-size: 20px;
      color: #445668;
      text-transform: uppercase;
      text-align: center;
      margin: 0 0 35px 0;
      text-shadow: 0px 1px 0px #f2f2f2;
    }
  </style>
</head>

<body>
  <div id="navi">
    <nav>
      <ul class="fancyNav">
        <li id="home"><a href="#home" class="homeIcon">Home</a>

        </li>
        <li id="news"><a href="#truth">TRUTH</a>

        </li>
        <li id="about"><a href="#Dare">DARE</a>

        </li>
      </ul>
    </nav>
  </div>
  <div id="box">
    <form id="truth">

      <h1> Truth </h1>

      <label>First Name:</label>
      <input type="text" nam e="firstname" maxlength="30" placeholder="John" required="required" />
      <br>
      <br>
      <label>Last Name:</label>
      <input type="text" name="lastname" maxlength="30" placeholder="Doe" required="required" />
      <br>
      <br>
      <label>Email:</label>
      <input type="email" id="email" required="required" />
      <br>
      <br>
      <label>Male</label>
      <input type="radio" name="gender" value="male" required="required" />
      <label>Female</label>
      <input type="radio" name="gender" value="female" required="required" />
      <br>
      <br>
      <label>Date to be performed:</label>
      <input type="date" name="date" required="required" />
      <br>
      <br>

      <h2> Victim </h2>

      <label>Name:</label>
      <input type="text" name="vname" maxlength="30" required="required" />
      <br>
      <br>
      <label>Email:</label>
      <input type="email" id="vemail" required="required" />
      <br>
      <br>
      <h2> Please select a truth questions below </h2> 
      <br>
      <input type="radio" name="truth" value="q1">Have you ever fallen and landed on your head?
      <br>
      <input type="radio" name="truth" value="q2">Have you ever return too much change?
      <br>
      <input type="radio" name="truth" value="q3">Have you ever been admitted into the hospital?
      <br>
      <input type="radio" name="truth" value="q4">Have you ever baked a cake?
      <br>
      <input type="radio" name="truth" value="q5">Have you ever cheated on test?
      <br>
      <input type="radio" name="truth" value="q6">Did you ever wish you were never born?
      <br>
      <input type="radio" name="truth" value="q7">Did you ever hide from Sunday School?
      <br>
      <br>
      <input type="submit" />
      <br>
    </form>
  </div>
</body>

</html>

I wish I could do that but we are required to use JavaScript for all validations.

smali · Accepted Answer · 2014-11-07 07:22:16Z

0

You have not given the ID to your element Input either give an ID or change the method to

getElementsByTagName("firstName");

edited Nov 7, 2014 at 7:22

answered Nov 7, 2014 at 4:13

smali

4,8537 gold badges42 silver badges67 bronze badges

Collectives™ on Stack Overflow

JavaScript name validation not working

5 Answers 5

Comments

View `jsFiddle`

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

View jsFiddle

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

View `jsFiddle`