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     lt form id  form  name  form  method  post  action  registration php  gt        lt label  gt username     lt input name  username  id  username  type  text    gt  lt  label gt   lt br gt       lt label  gt password     lt input name  password  id  password  type  password    gt  lt  label gt            lt label gt confirm password   lt input type  password  name  confirm password  id  confirm password    gt       lt  label gt   lt label gt     lt input type  submit  name  submit   value  registration     gt   lt  label gt    Is there any way to do this  Thanks in advance for any help

User · Answer

Using Native setCustomValidity

Compare the password/confirm-password input values on their change event and setCustomValidity accordingly:

_x000D_

function onChange() {_x000D_
  const password = document.querySelector('input[name=password]');_x000D_
  const confirm = document.querySelector('input[name=confirm]');_x000D_
  if (confirm.value === password.value) {_x000D_
    confirm.setCustomValidity('');_x000D_
  } else {_x000D_
    confirm.setCustomValidity('Passwords do not match');_x000D_
  }_x000D_
}

_x000D_

<form>_x000D_
  <label>Password: <input name="password" type="password" onChange="onChange()" /> </label><br />_x000D_
  <label>Confirm : <input name="confirm"  type="password" onChange="onChange()" /> </label><br />_x000D_
  <input type="submit" />_x000D_
</form>

_x000D_

User · Answer

try using jquery like this     input type submit    click function e   if     password   val            alert  please enter password    return false          also add this line in head of html   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 6 jquery min js  gt  lt  script gt

User · Answer

I think this example is good to check https   codepen io diegoleme pen surIK I can quote code here  lt form class  quot pure-form quot  gt       lt fieldset gt           lt legend gt Confirm password with HTML5 lt  legend gt            lt input type  quot password quot  placeholder  quot Password quot  id  quot password quot  required gt           lt input type  quot password quot  placeholder  quot Confirm Password quot  id  quot confirm password quot  required gt            lt button type  quot submit quot  class  quot pure-button pure-button-primary quot  gt Confirm lt  button gt       lt  fieldset gt   lt  form gt   and var password   document getElementById  quot password quot       confirm password   document getElementById  quot confirm password quot     function validatePassword      if password value    confirm password value        confirm password setCustomValidity  quot Passwords Don t Match quot        else       confirm password setCustomValidity             password onchange   validatePassword  confirm password onkeyup   validatePassword

User · Answer

box      input name showPassword       box focus function        if    this  is   checked                 input name pswd    attr  type    password              else              input name pswd    attr  type    text

User · Answer

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             lt input type  password  name  password  id  password  onchange  check pass      gt   lt input type  password  name  confirm password  id  confirm password  onchange  check pass      gt   lt input type  submit  name  submit   value  registration   id  submit  disabled  gt

User · Answer

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   x000D   x000D      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        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt label gt password      lt input name  password  id  password  type  password    gt   lt  label gt   lt br gt   lt label gt confirm password     lt input type  password  name  confirm password  id  confirm password    gt     lt span id  message  gt  lt  span gt   lt  label gt  x000D   x000D   x000D   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   x000D   x000D  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         x000D   lt label gt password      lt input name  password  id  password  type  password  onkeyup  check       gt   lt  label gt   lt br gt   lt label gt confirm password     lt input type  password  name  confirm password  id  confirm password   onkeyup  check       gt      lt span id  message  gt  lt  span gt   lt  label gt  x000D   x000D   x000D   and here is the fiddle  http   jsfiddle net aelor F6sEv 324

User · Answer

input type submit    on  click   validate     function validate       var password1       password1   val      var password2       password2   val         if password1    password2               validate-status   text  valid                      else               validate-status   text  invalid                 Logic is to check on keyup if the value in both fields match or not     Working fiddle  http   jsfiddle net dbwMY  More details here  Checking password match while typing

User · Answer

WITHOUT clicking the button you will have to listen to the change event of the input fields  var confirmField   document getElementById  confirm password    var passwordField   document getElementById  password     function checkPasswordMatch        var status   document getElementById  password status        var submit   document getElementById  submit         status innerHTML           submit removeAttribute  disabled         if confirmField value                 return       if passwordField value     confirmField value          return       status innerHTML    Passwords don t match       submit setAttribute  disabled    disabled       passWordField addEventListener  change   function event       checkPasswordMatch        confirmField addEventListener  change   function event       checkPasswordMatch          then add the status element to your html    lt p id  password status  gt  lt  p gt    and set the submit button id to submit      id  submit    gt    hope this helps you

User · Answer

HTML CODE            lt input type  text  onkeypress  checkPass     name  password  class  form-control  id  password  placeholder  Password  required gt            lt input type  text  onkeypress  checkPass     name  rpassword  class  form-control  id  rpassword  placeholder  Retype Password  required gt       JS CODE   function checkPass             var pass    document getElementById  password   value           var rpass    document getElementById  rpassword   value          if pass    rpass               document getElementById  submit   disabled   true                  missmatch   html  Entered Password is not matching   Try Again             else                  missmatch   html                  document getElementById  submit   disabled   false

User · Answer

function check         if document getElementById  password   value                 document getElementById  confirm password   value            document getElementById  message   innerHTML    match         else           document getElementById  message   innerHTML    no match              lt label gt password    lt input name  password  id  password  type  password    gt   lt  label gt   lt label gt confirm password   lt input type  password  name  confirm password  id  confirm password  onchange  check     gt    lt span id  message  gt  lt  span gt

User · Answer

The code proposed by  Chandrahasa Rai works almost perfectly good  with one exception  When triggering function checkPass    i  changed onkeypress to onkeyup so the last key pressed can be processed too  Otherwise when You type a password  for example   quot 1234 quot   when You type the last key  quot 4 quot   the script triggers checkPass   before processing  quot 4 quot   so it actually checks  quot 123 quot  instead of  quot 1234 quot   You have to give it a chance by letting key go up    Now everything should be working fine   Chandrahasa Rai  HTML code   lt input type  quot text quot  onkeypress  quot checkPass    quot  name  quot password quot  class  quot form-control quot  id  quot password quot  placeholder  quot Password quot  required gt    lt input type  quot text quot  onkeypress  quot checkPass    quot  name  quot rpassword quot  class  quot form-control quot  id  quot rpassword quot  placeholder  quot Retype Password quot  required gt    my modification   lt input type  quot text quot  onkeyup  quot checkPass    quot  name  quot password quot  class  quot form-control quot  id  quot password quot  placeholder  quot Password quot  required gt    lt input type  quot text quot  onkeyup  quot checkPass    quot  name  quot rpassword quot  class  quot form-control quot  id  quot rpassword quot  placeholder  quot Retype Password quot  required gt

User · Answer

Try this one    CSS   indicator      width 20px      height 20px      display block      border-radius 10px     green      background-color green       display block     red      background-color red         display block      HTML   lt form id  form  name  form  method  post  action  registration php  gt        lt label  gt username         lt input name  username  id  username  type  text    gt  lt  label gt   lt br gt       lt label  gt password         lt input name  password  id  password  type  password  id  password    gt  lt  label gt        lt br gt       lt label gt confirm password       lt input type  password  name  confirm password  id  confirm password    gt  lt span id  indicator  gt  lt  span gt   lt br gt       lt  label gt       lt label gt       lt input type  submit  name  submit  id  regbtn   value  registration     gt       lt  label gt   lt  form gt    JQuery      confirm password   keyup function        var pass            password   val        var cpass           confirm password   val        if pass  cpass               indicator   attr  class  red                 regbtn   attr  disabled true              else              indicator   attr  class  green                 regbtn   attr  disabled false

User · Answer

You can check confirm password by only simple javascript  html   lt input type  password  name  password  required gt   lt input type  password  name  confirmpassword  onkeypress  register    required gt   lt div id  checkconfirm  gt  lt  div gt    and in javascript     function register          var password  document getElementById  password   value       var confirm  document getElementById  confirmpassword   value       if  confirm  password         var field   document getElementById  checkconfirm         field innerHTML    not match               Also you can use onkeyup instead of onkeypress

User · Answer

Solution Using jQuery    lt script src  http   code jquery com jquery-2 1 0 min js  gt  lt  script gt     lt style gt       form label float left  width 140px        error msg color red  font-weight bold     lt  style gt     lt script gt        document  ready function            var  submitBtn       form input type  submit              var  passwordBox       password            var  confirmBox       confirm password            var  errorMsg        lt span id  error msg  gt Passwords do not match  lt  span gt                 This is incase the user hits refresh - some browsers will maintain the disabled state of the button           submitBtn removeAttr  disabled             function checkMatchingPasswords                if  confirmBox val          amp  amp   passwordBox val                         if   confirmBox val       passwordBox val                           submitBtn attr  disabled    disabled                         errorMsg insertAfter  confirmBox                                                      function resetPasswordError                 submitBtn removeAttr  disabled                var  errorCont       error msg                if  errorCont length  gt  0                    errorCont remove                                            confirm password   password                 on  keydown   function e                      only check when the tab or enter keys are pressed                    to prevent the method from being called needlessly                     if e keyCode    13    e keyCode    9                        checkMatchingPasswords                                                    on  blur   function                                           also check when the element looses focus  clicks somewhere else                  checkMatchingPasswords                                on  focus   function                       reset the error message when they go to make a change                 resetPasswordError                               lt  script gt    And update your form accordingly    lt form id  form  name  form  method  post  action  registration php  gt        lt label for  username  gt Username    lt  label gt       lt input name  username  id  username  type  text    gt  lt  label gt  lt br  gt        lt label for  password  gt Password   lt  label gt        lt input name  password  id  password  type  password    gt  lt br  gt        lt label for  confirm password  gt Confirm Password  lt  label gt       lt input type  password  name  confirm password  id  confirm password    gt  lt br  gt        lt input type  submit  name  submit   value  registration     gt   lt  form gt    This will do precisely what you asked for    validate that the password and confirm fields are equal without clicking the register button If password and confirm password field will not match it will place an error message at the side of confirm password field and disable registration button   It is advisable not to use a keyup event listener for every keypress because really you only need to evaluate it when the user is done entering information   If someone types quickly on a slow machine  they may perceive lag as each keystroke will kick off the function            Also  in your form you are using labels wrong   The label element has a  for  attribute which should correspond with the id of the form element   This is so that when visually impaired people use a screen reader to call out the form field  it will know text belongs to which field

User · Answer

lt form id  form  name  form  method  post  action  registration php  onsubmit  return check    gt                   lt  form gt    lt script gt        form   submit function         if     password   val        confirm password   val                    alert  password should be same             return false              lt  script gt    hope it may help you

[javascript] how to check confirm password field in form without reloading page

Using Native setCustomValidity

Examples related to javascript

Examples related to jquery

Examples related to ajax