Password/Confirm password with jquery

Utilises jQuery's keyup event to trigger a match between both fields after every keystroke.

by alachgar

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- This jquery.min.js is necessary for popup to Print Modal -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		
		<!-- This For Phone Mask -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>	
		
		<!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->		
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		
		<!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>	
		
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
		 <script src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/lib/js/emojione.min.js"></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
					<div class="col-md-4"> 
						<label class="control-label">Your password:</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
							</span>
							<input id="password1" class="form-control" type="password">
             
						</div>
					</div>
					<div class="col-md-4"> 
						<label class="control-label">Confirm password:</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
							</span>
							<input id="password2" class="form-control" type="password">
              <span id='message'></span>
						</div>
					</div>
				</div>

JavaScript

$('#password1, #password2').on('keyup', function () {
    if ($('#password1').val() == $('#password2').val()) {
        $('#message').html('Password matched').css('color', 'green');
    } else 
        $('#message').html('Matching password !').css('color', 'red');
});