Compare part of input with another

Question

I found this script:

<label>password :
  <input name="password" id="password" type="text" />
</label>
<br>
<label>confirm password:
  <input type="text" name="confirm_password" id="confirm_password" /> <span id='message'></span>

http://jsfiddle.net/sprme2gq/2/

$('#confirm_password').on('keyup', function () {
    if ($(this).val() == $('#password').val()) {
        $('#message').html('matching').css('color', 'green');
    } else $('#message').html('not matching').css('color', 'red');
});

but I'd like to compare the first input with the second, but instead compare the exact value, i'd like to compare if it is on its way.

For example, the first input is: "1234"
and in the second is being typed: "12"
in this moment i'd like to show it's still right, or at least, that it's almost there, not as wrong and only when the input are exactly the same say it's right.

Could someone help me with this?

You need implementation of "1234".startswith("12") check that http://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string — Amir Katz, Jan 03 '16 at 19:56
@LOTUSMS, please do not use the [tag:jquery-validate] tag when the question has absolutely nothing to do with this plugin. Edited. Thanks. — Sparky, Jan 03 '16 at 20:11

score 1 · Answer 1 · answered Jan 03 '16 at 20:00

1

Hope this helps:

function AlmostThere(pwd, pwdConfirm) {
   var confirmLength = pwdConfirm.length;
   var partialPwd = pwd.substr(0, confirmLength);
   return pwdConfirm ==partialPwd;
}
$('#confirm_password').on('keyup', function() {
   if (AlmostThere($('#password').val(),$(this).val())) {
      $('#message').html('matching').css('color', 'green');
   } else $('#message').html('not matching').css('color', 'red');
});

answered Jan 03 '16 at 20:00

guysigner

2,594
1
15
23

+1 for your answer. Fiddle update with above answer with some minor change http://jsfiddle.net/sprme2gq/3/ – Pardeep Dhingra Jan 03 '16 at 20:03

score 0 · Answer 2 · answered Jan 03 '16 at 19:58

JQuery unobtrusive validations handle all such. U can use them instead writing your own. U can have a flag saying when you are first time inside box don't compare till it's right. Set the flag to start compare when inputs are same or on focusout or change of confirm password.

score 0 · Accepted Answer · answered Jan 03 '16 at 19:58

Simply check if the Password1 begins with Password2

$('#confirm_password').on('keyup', function () {
    var p1 = $(this).val(),
        p2 = $('#password').val();

    if (p2 === '') {
        notify('');
        return;
    }
    if (p1 === p2) {
        notify('matching', 'green');
        return;
    }
    if (p1.indexOf(p2) === 0) {
        notify('waiting', 'yellow');
        return;    
    }
    notify('not matching', 'red')

    function notify(message, color) {
        $('#message').html(message).css('color', color);
    }
});

Thank you so much, I just think it's to compare the password with the confirmation but the code is comparing the confirmation with password, but it help me a lot. Thank you! — Mateus Gutemberg, Jan 03 '16 at 20:17

score 0 · Answer 4 · answered Jan 03 '16 at 20:01

I would do something like this:

$('#confirm_password, #password').on('input', function(e){
  changeColor($('#confirm_password').val(), $('#password').val());
});

function changeColor(c, p){
  var color;
  if(c === p){
    color = 'green';
  } else if(p.indexOf(c) === 0 && c != ''){
    color = 'yellow';
  } else {
    color = 'red';
  }
  $('#confirm_password').css('background-color', color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>password :
  <input name="password" id="password" type="text" />
</label>
<br>
<label>confirm password:
  <input type="text" name="confirm_password" id="confirm_password" /> <span id='message'></span>

Compare part of input with another

4 Answers4