Java Script Form Validation

Question

I am building adding JavaScript validation to my sign in form, i can successfully validate the username against certain criteria, however i am struggling to validate the password input. Any help would be greatly appreciated. Many Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>An AJAX Username Verification Tool</TITLE>
<META NAME="Keywords" CONTENT="form, username, checker">
<META NAME="Description" CONTENT="An AJAX Username Verification Script">

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

<SCRIPT type="text/javascript">


 pic1 = new Image(16, 16); 
 pic1.src = "loader.gif";

 $(document).ready(function(){

 $("#username").change(function() { 

 var usr = $("#username").val();

   if(usr.length <= 4)
 {
    $("#status").html('<font color="red">The username should have more than      <strong>4</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
    else if(usr.length >= 14)
 {
$("#status").html('<font color="red">The username not be longer than <strong>14</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
  else if(usr.indexOf('@') === -1 )
 {
$("#status").html('<font color="red">Please insert correct <strong>Email</strong> format.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
    else
{
  $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

  $.ajax({  
  type: "POST",  
  url: "check.php",  
  data: "username="+ usr,  
  success: function(msg){  

 $("#status").ajaxComplete(function(event, request, settings){ 

if(msg == 'OK')
{ 
    $("#username").removeClass('object_error'); // if necessary
    $("#username").addClass("object_ok");
    $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
}  
else  
{  
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    $(this).html(msg);
}  

   });

   } 

    }); 
}

  });
    // HERE IS WHERE I AM HAVING THE PROBLEMS
    $("#password").change(function() { 

    var pass = $("#password").val();
    if(pass.length <= 4){

    $("#status2").html('<font color="red">The username should have more than <strong>4</strong> characters.</font>');
    $("#password").removeClass('object_ok'); // if necessary
    $("#password").addClass("object_error");
    }

  });
  // END OF PROBLEM
  });


  </SCRIPT>

  </HEAD>

   <BODY>
   <center>

  <div align="center">

  <h2 align="center">AJAX Username Verification</h2>



  <form>
    <table width="700" border="0">  
      <tr>
  <td width="200"><div align="right">Username:&nbsp;</div></td>
  <td width="100"><input id="username" size="20" type="text" name="username"></td>
  <td width="400" align="left"><div id="status"></div></td>
</tr> 

<tr>
  <td width="200"><div align="right">Password:&nbsp;</div></td>
  <td width="100"><input size="20" type="text" name="password"></td>
  <td width="400" align="left"><div id="status2"></div></td>
</tr> 

<tr>
     <td width="200"><div align="right">Confirm Password:&nbsp;</div></td>
    <td width="100"><input size="20" type="text" name="confirm_password"></td>
   <td width="400" align="left"><div id="status3"></div></td>
   </tr> 
    </table>
  </form>

  </div>
   </center>

   </BODY>
  </HTML>

What error are you getting ? What problem are you referring to ? — The Dark Knight
– The Dark Knight, Commented Jan 16, 2014 at 14:08

Eran · Accepted Answer · 2014-01-17 18:45:51Z

1

You haven't placed the id on password field.

<td width="100"><input size="20" type="text" name="password"></td> this should be like

<td width="100"><input size="20" type="text" id="password"></td>

So you can replace your <tr> with this

<tr>
  <td width="200"><div align="right">Password:&nbsp;</div></td>
  <td width="100"><input size="20" type="text" name="password" id="password"></td>
  <td width="400" align="left"><div id="status2"></div></td>
</tr>

edited Jan 17, 2014 at 18:45

Eran

395k57 gold badges726 silver badges793 bronze badges

answered Jan 16, 2014 at 14:14

Freak

6,9035 gold badges41 silver badges56 bronze badges

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

Comments

saike · Accepted Answer · 2014-01-16 14:13:02Z

0

At first, you must assign id "password" to your input, then JQUERY will can to find this input. And, I think, it much better to change attribute "type" to "password" for password inputs:

<input size="20" type="password" name="password" id="password"/>

answered Jan 16, 2014 at 14:13

saike

1,06510 silver badges17 bronze badges

Collectives™ on Stack Overflow

Java Script Form Validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related