CODEWITHSUNDEEP
javascriptphpjqueryajax
saru
saru

Reputation: 214

Check if Passwords Match

How do I make sure that password fields match before letting user proceed?

<input name="pass" id="pass" type="password" />
<input type="password" name="cpass" id="cpass" /> <span id='message'></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
    $('#message').html('Matching').css('color', 'green');     
} 
else $('#message').html('Not Matching').css('color', 'red'); 
});
 </script>
<input type="text" name="phone" id="phone">

Upvotes: 1

Views: 890

Answers (2)

deviloper
deviloper

Reputation: 7240

Using the jquery you can remove the disable attribute of the phone input:

<input type="text" name="phone" id="phone" disabled />

$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
    $('#message').html('Matching').css('color', 'green');
    $("#phone").prop('disabled', false);    
} 
else $('#message').html('Not Matching').css('color', 'red'); 
});

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can enable disable textbox based on condition by adding attribute disabled to input for phone field:

$('#pass, #cpass').on('keyup', function () {
  if ($('#pass').val() == $('#cpass').val()) {
   $('#message').html('Matching').css('color', 'green'); 
   $("#phone").removeAttr("disabled"); 
  } 
 else {
   $('#message').html('Not Matching').css('color', 'red'); 
   $("#phone").attr("disabled", "disabled"); 
  }
 });

Working Demo

Upvotes: 2

Related Questions