i am trying to validate the two inputs to match each-other with jquery and i couldn't find a way to do it. i can't make the jquery to get the values of the two inputs, therefore it can't check if they are not matching eachother. the input are made with codeignither, so for anyone who doesn't familiar with it - the id of the first input is 'pass' and the second is 'pass2'

<tr>
            <td>choose a password:</td>
            <td><?= form_password('password', '', 'placeholder="choose a password" required="required" id="pass"') ?></td>
        </tr>
        <tr>
            <td>re-type the password:</td>
            <td><?= form_password('password2', '', 'placeholder="re-type your password" required="required" id="pass2"') ?></td>
        </tr>

the script -

$(document).ready(function(){
    var pass = $('#pass').val();
    var pass2 = $('#pass2').val();

    $('#pass2').focusout(function(){
        if(pass != pass2){
            alert('the passwords didn\'t match!');
        }

    });
});

i am trying to validate the two inputs to match each-other with jquery and i couldn't find a way to do it. i can't make the jquery to get the values of the two inputs, therefore it can't check if they are not matching eachother. the input are made with codeignither, so for anyone who doesn't familiar with it - the id of the first input is 'pass' and the second is 'pass2'

<tr>
            <td>choose a password:</td>
            <td><?= form_password('password', '', 'placeholder="choose a password" required="required" id="pass"') ?></td>
        </tr>
        <tr>
            <td>re-type the password:</td>
            <td><?= form_password('password2', '', 'placeholder="re-type your password" required="required" id="pass2"') ?></td>
        </tr>

the script -

$(document).ready(function(){
    var pass = $('#pass').val();
    var pass2 = $('#pass2').val();

    $('#pass2').focusout(function(){
        if(pass != pass2){
            alert('the passwords didn\'t match!');
        }

    });
});

• javascript
• jquery

• Look at the HTML, not the … whatever that template language is. – Quentin Commented Oct 16, 2014 at 18:25

2 Answers 2

because you are reading the values on document ready, not when the user changed them. Move it inside the focusout.

$(document).ready(function(){
    $('#pass2').focusout(function(){
        var pass = $('#pass').val();
        var pass2 = $('#pass2').val();
        if(pass != pass2){
            alert('the passwords didn\'t match!');
        }

    });
});

Because you need to write the code as

$('#pass2').focusout(function(){
    // get values on the focusout event
    var pass = $('#pass').val();
    var pass2 = $('#pass2').val();
    // test them...
    if(pass != pass2){
        alert('the passwords didn\'t match!');
    }

});