how to check confirm password field in form without reloading page

Question

I have a project in which I have to add a registration form and I want to to validate that the password and confirm fields are equal without clicking the register button.

If password and confirm password field will not match, then I also want to put an error message at side of confirm password field and disable registration button.

following is my html code..

<form id="form" name="form" method="post" action="registration.php">      <label >username :  <input name="username" id="username" type="text" /></label> <br>     <label >password :  <input name="password" id="password" type="password" /></label>          <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" />     </label> <label>   <input type="submit" name="submit"  value="registration"  /> </label> 

Is there any way to do this? Thanks in advance for any help.

Answer 1

We will be looking at two approaches to achieve this. With and without using jQuery.

1. Using jQuery

You need to add a keyup function to both of your password and confirm password fields. The reason being that the text equality should be checked even if the password field changes. Thanks @kdjernigan for pointing that out

In this way, when you type in the field you will know if the password is same or not:

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

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

and here is the fiddle: http://jsfiddle.net/aelor/F6sEv/325/

2. Without using jQuery

We will use the onkeyup event of javascript on both the fields to achieve the same effect.

var check = function() {   if (document.getElementById('password').value ==     document.getElementById('confirm_password').value) {     document.getElementById('message').style.color = 'green';     document.getElementById('message').innerHTML = 'matching';   } else {     document.getElementById('message').style.color = 'red';     document.getElementById('message').innerHTML = 'not matching';   } }

<label>password :   <input name="password" id="password" type="password" onkeyup='check();' /> </label> <br> <label>confirm password:   <input type="password" name="confirm_password" id="confirm_password"  onkeyup='check();' />    <span id='message'></span> </label>

and here is the fiddle: http://jsfiddle.net/aelor/F6sEv/324/

Answer 2

If you don't want use jQuery:

function check_pass() {     if (document.getElementById('password').value ==             document.getElementById('confirm_password').value) {         document.getElementById('submit').disabled = false;     } else {         document.getElementById('submit').disabled = true;     } } 

<input type="password" name="password" id="password" onchange='check_pass();'/> <input type="password" name="confirm_password" id="confirm_password" onchange='check_pass();'/> <input type="submit" name="submit"  value="registration"  id="submit" disabled/>