如何实时比较2个表单输入

Question

I'm trying to compare two form inputs "password" and re-enter-password" to make sure there the same. I validate the password by sending it to a separate PHP that echoes back the results(which works fine)

<script type="text/javascript">
  $(document).ready(function() {
    $('#password_feedback').load('password-check.php').show();

    $('#password_input').keyup(function() {

      $.post('password-check.php', {
          password: form.password.value
        },
        function(result) {
          $('#password_feedback').html(result).show();
        });

    });
  });
</script>

I tried sending password and re-enter=password to a PHP to compare with no luck. Can I compare the two with every keyup.

Answer 1

Not necessary jQuery, add the function:

function checkPass(input) {
    if (input.value != document.getElementById('re-enter-password').value) {
        input.setCustomValidity('Passwords should match.');
    } else {
        input.setCustomValidity('');
    }
}

Add this to your re-enter-password: oninput="checkPass(this)"

OR just call this function in the part where you want to make the comparison:

function checkPass() {
    var input = document.getElementById('password');

    if (input.value != document.getElementById('re-enter-password').value) {
        input.setCustomValidity('Passwords should match.');
    } else {
        input.setCustomValidity('');
    }
}

Answer 2

How about adding a class to each input and then:

if($(".password").val() == $(".re-enter-password").val()){
    alert("it matches")
} else {
    alert("no match yet");
}

Answer 3

What are you checking for in your PHP script? Anything in particular that justifies the use of PHP?

You could do that only with JS, you don't need the AJAX part.

HTML :

<input type="password" id="password">
<input type="password" id="password_cf">    
<div class="result"></div>

JS (jQuery) :

$('#password_cf').on('keyup', function(){     

    if($('#password_cf').val()== $('#password').val())
        $('.result').html('They match');
    else
        $('.result').html('They do not match');
});

Fiddle : http://jsfiddle.net/2sapjxnu/

You can use the blur event if you want to only check once the focus is lost on that field. It's a bit less "responsive" than verifying on every key, but more performant I guess.

Answer 4

Quick and dirty -

Given this markup -

<input type="password" name="pw1" />
<input type="password" name="pw2" />

You could check it client side without muliple round trips to the server using code like this -

$('[name="pw2"]').blur(function() {
    var pw1 = $('[name="pw1"]').val();
    var pw2 = $('[name="pw2"]').val();
    if(pw2 != pw1) {
        alert('passwords do not match');
    }
});

Answer 5

Matching 2 form input fields with JavaScript by sending it off to the server to get an assertion response could render a bad user experience, because if you're doing this on each keyPress, then it generates unnecessary internet traffic - while the user is waiting.

So, instead, why not match these 2 fields directly with JavaScript? If you are using a specific regular expression on the server for validation check as well, you can have the server put that regex "pattern" in the HTML fields - (no JavaScrpt needed for that). Then, onkeyup event you can simply do something like:

form.field2.onkeyup = function()
{
    if (form.field1.value !== form.field2.value)
    {
      /* some code to highlight the 2 fields,
         or show some message, or speech bubble */
      return;
    }
}

form.field1.onkeyup = form.field2.onkeyup;