CODEWITHSUNDEEP
javascriptphpformsvalidation
mike
mike

Reputation: 43

how to compare 2 form inputs live

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.

Upvotes: 1

Views: 2763

Answers (5)

user4244405
user4244405

Reputation:

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;

Upvotes: 0

Gerardo Charles Rojas Vega
Gerardo Charles Rojas Vega

Reputation: 633

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('');
    }
}

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34416

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');
    }
});

Upvotes: 0

Drown
Drown

Reputation: 5982

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.

Upvotes: 1

user4243768
user4243768

Reputation:

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");
}

Upvotes: 0

Related Questions