JavaScript Form Validation not Working -- Check Character Count on Entry

Question

My HTML:

<html>
   <head>
       <title>Js</title>
       <link href="js1.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
       <div id="box">
          <form action="action.php">
             <label>Enter Name
                  <input id="Username" type="text" name="Enter Username" />
             </label>
             <div id="feedback"></div>
             <label id="pass">Password
                  <input id="pass" type="password" name="Enter Passkey" />
              </label>
                 <input type="submit" value="sign up" />
          </form>
       </div>
       <script src="js1.js"></script>
       </body>
</html>

My JavaScript:

function checkUsername() { // Declare function
   var elMsg = document.getElementById('feedback'); // Get feedback element
   if (this.value.length < 5) { // If username too short
   elMsg.textContent = 'Username must be 5 characters or more'; // Set msg
    } else { // Otherwise
    elMsg.textContent = ''; // Clear message
   }
 }

  var elUsername = document.getElementById('Username'); // Get-name input
  elUsername.onBlur = checkUsername; //  loses focus call checkuserName()

My CSS:

body{
   background-color:black;
  }
#box{
background-color:silver;

height:600px;
width:600px;
margin-left:300px;
}

p{
color:white;
font-size:18;
}
form{
padding:20px;
width:96px;
}
input[type="text"] , input[type="password"]
{
background-color:#999;
border:2px solid white;

}
input[type="text"]:focus , input[type="password"]:focus
{
background-color:#fff
}

What the program is supposed to do :

Once the user is done entering the UserName, the function must check if it has atleast 5 characters else display a msg in place of "feedback"?

What am I missing?

`` [docs](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input) — Niet the Dark Absol, Dec 30 '15 at 17:27
I hope you're not relying on client side validation. Users can alter their clients, or they can chose not to run javascript at all. You should always perform back end validation *regardless* of whether or not you're validating input on the client. — Charles D Pantoga, Dec 30 '15 at 18:40

Antonio Smoljan · Accepted Answer · 2015-12-30T17:46:45.213

0

You have a typo in this line var elUsername = document.getElementById('username')

The id of the input is uppercase Username

try:

var elUsername = document.getElementById('Username')

And another more important typo onBlur event in elUsername.onBlur = checkUsername should be onblur all lowercase.

Here is a working Example

edited Dec 30 '15 at 17:46

answered Dec 30 '15 at 17:27

Antonio Smoljan

2,187
1
12
11

Call the function on blur correctly `elUsername.onBlur = checkUsername();` you forgot the brackets – Antonio Smoljan Dec 30 '15 at 17:39
Isn't that optional as I pass no parameters to the function ? Anyway tried ,still no luck – Bonny Mahajan Dec 30 '15 at 17:40
Try all lowercase `onblur` like this `elUsername.onblur = checkUsername`, and yes you are right about the brackets my bad. I've recreated your code and it works fine now. – Antonio Smoljan Dec 30 '15 at 17:43
Worked like a charm.Thanks! – Bonny Mahajan Dec 30 '15 at 17:49
@CharlesAddis you can log `this.value` it displays the input try it inside the function, open up my example and enter something in the input it logs `this.value`. – Antonio Smoljan Dec 30 '15 at 17:50
@BonnyMahajan anytime :D, be sure to accept the answer! – Antonio Smoljan Dec 30 '15 at 17:54
I'd appreciate it if the downvoter stated the reason so i'd know if i did something wrong. – Antonio Smoljan Dec 30 '15 at 17:57

JavaScript Form Validation not Working -- Check Character Count on Entry

1 Answers1