CODEWITHSUNDEEP
jqueryhtmlonkeydown
chrinsen
chrinsen

Reputation: 21

input onkeydown event works on first element but not on second

I've got a problem with the onkeydown event. I'm using it on 2 input elements, but it only works on the first. On the second, it just gives me the the error: Uncaught TypeError: object is not a function.
jQuery: 

function count() {
    var length = $('#pass').length;
    if (length < 32) {
        $('#length').text(length + ' characters out of 32');
    }
}
function match() {
    if ($('#pass').attr('value') == $('#pass2').attr('value')) 
    {
        $('#match').text('<img src="/css/images/check.png" /> Passwords match.');
    }
    else 
    {
        $('#match').text('<img src="/css/images/close.png" /> Passwords do not match.');
    }
}

HTML: 

<form method='post'>
    <input type='password' name='pass' value='' id='pass' onkeydown='count()' />
    <span id='length'></span>
    <input type='password' name='pass2' value='' id='pass2' onkeydown='match()' />
    <span id='match'></span>
</form>

Upvotes: 0

Views: 791

Answers (3)

Faizul Hasan
Faizul Hasan

Reputation: 623

Try the following code block

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
          function count() {
             var length = $('#pass').val().length;
             if (length < 32) {
                $('#length').text(length + ' characters out of 32');
             }
          }
          function match() {
             var matchStatus = $('#match').find('span');
             var matchImg = $('#match').find('img');
             if ($('#pass').val() == $('#pass2').val()) {
               matchImg.prop('src', '/css/images/check.png');
               matchStatus.html('Passwords match');
             }
             else {
                matchImg.prop('src', '/css/images/close.png');
                matchStatus.html('Passwords do not match');
             }
          }

      </script>
    </head>
    <body>
      <form method='post'>
        <input type='password' name='pass' value='' id='pass' onkeyup='count()' />
        <span id='length'></span>
        <input type='password' name='pass2' value='' id='pass2' onkeyup='match()' />
        <span id='match'>
          <img src="" />
          <span></span>
        </span>
      </form>
    </body>
</html>

Mistakes I have found

  1. $('#pass').length
  2. onkeydown - should be onkeyup - because first it will fire onkeydown then will place the text (so length and equality will give wrong result)
  3. Make the code simple as possible when you access an item using script. Do not do $('#match').text again and again. Instead assign to one var obj and use it.

Hope this will help you.. :)

Upvotes: 1

Sibiraj PR
Sibiraj PR

Reputation: 1481

Use jquery.validate js

     <html>
     <head>
      <title> Password and Confirm Password Validation Using Jquery </title>
      <script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
      <script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.validate.js"></script>
     <script>

    function validatePassword(){  
      var validator = $("#loginForm").validate({
        rules: {                      
          password :"required",
          confirmpassword:{
            equalTo: "#password"
            }   
          },                              
          messages: {
            password :" Enter Password",
            confirmpassword :" Enter Confirm Password Same as Password"
          }
      });
      if(validator.form()){
        alert('Sucess');
      }
    }

     </script>
     </head>

     <body>
      <form method="post" id="loginForm" name="loginForm">
        <table cellpadding="0" border="1">
          <tr>
            <td>Password</td>
            <td><input tabindex="1" size="40" type="password" name="password" id="password"/></td>
          </tr>
          <tr>
            <td>Confirm Password</td>
            <td><input tabindex="1" size="40" type="password" name="confirmpassword" id="confirmpassword"/></td>
          </tr>
          <tr>
            <td colspan="2" align="center"><input tabindex="3" type="button" value="Submit" onClick="validatePassword();"/></td>          
          </tr>
        </table>        
      </form> 
     </body>
    </html>

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

match is a pre-defined in js so change match to matched

Upvotes: 0

Related Questions