Jquery passcode (4 digits number) validation

Question

I need to validate a simple pin/passcode form and then be able to submit if correct .

How can I validate this pin number If passocode is wrong display a message. if passcode is correct then eneble button and proceed! Any help would be much appreciated.

HTML:

<form>
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="password" maxlength="1" id="" name="pass" />
    <input type="submit" value="submit" id="submit" disabled="disabled" />
</form>

JS:

 $("form").validate({
        rules: {
            pass: {
                required: true,
                minlength: 4,
                equalTo: "0000"
            }
        },
        messages: {
            pass: {
                required: "Please provide a PIN DIGIT",
                minlength: "Please enter at least 4 numbers"
            }
        }
    });

http://jsfiddle.net/E4Gz6/

Answer 1

Well for this you will have to use jQuery Ajax.

Make a simple PHP script, which will take POST data, which will be your password, and if the password matches, for example with your database, or directly hardcoded to the PHP script, it will echo true otherwise false. If you wont use PHP, and you will store the PIN in your Javascript, it will be visible for others.

EDIT: This should be working according to your design.

<form>
<input type="password" maxlength="1" id="digit1" class="pass" />
<input type="password" maxlength="1" id="digit2" class="pass" />
<input type="password" maxlength="1" id="digit3" class="pass" />
<input type="password" maxlength="1" id="digit4" class="pass" />
<input type="submit" value="submit" id="submit" disabled="disabled" />
</form>

JS:

$( document ).ready(function() {

 $(".pass").keydown( function() {
 pass=$("#digit1").val() + $("#digit2").val() + $("#digit3").val() + $("#digit4").val();
  $.ajax({
   type: "POST",
   url: "passCheck.php",
    data: "password="+pass,
    success: function(html){    
    if(html=='true')    {
         $("#submit").removeAttr("disabled");
    }
    else    {
         $("#submit").attr('disabled','disabled');

    }
   },

  });
});   

});

PHP: (just in case)

$pass = $_POST["password"];

if ($pass == "1234")
echo "true";
else
echo "false";

EDIT 2: If you dont want to use PHP and Ajax, simply for prototyping and playing with it, you can use simple check, but its strongly not recommanded, as everyone can see the pass in the code:

JS:

$( document ).ready(function() {

 $(".pass").keydown( function() {
 pass=$("#digit1").val() + $("#digit2").val() + $("#digit3").val() + $("#digit4").val();

 correctPass = "1234";  
    if(pass==correctPass)    {
         $("#submit").removeAttr("disabled");
    }
    else    {
         $("#submit").attr('disabled','disabled');
    }
   });
});