How do I validate password and confirm password fields using BootstrapValidator?

Web Development
,
1

I am using the BootstrapValidator plugin to validate a form that has a password and confirm password fields. I want to make sure that the values of these fields are the same before the form is submitted. Is there a way to do this using the BootstrapValidator plugin?

$('#login-form').bootstrapValidator()
.on('success.form.bv', function(e) {
    // ajax code goes here
});

Here is my HTML code.

<form id="login-form">
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" required
     name="password" data-bv-notempty-message="Password cannot be empty">
  </div>
  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" 
    name="confirm_password" required
    data-bv-notempty-message="Confirm password cannot be empty">
  </div>
</form>
2

You can use the identical validator to solve the problem easily like below.

$('#login-form').bootstrapValidator({
  fields: {
    password: {
      validators: {
        notEmpty: {
          message: 'The password is required'
        }
      }
    },
    confirmPassword: {
      validators: {
        notEmpty: {
          message: 'The confirm password is required'
        },
        identical: {
          field: 'password',
          message: 'The password and confirm password do not match'
        }
      }
    }
  }
});

If you still want to solve it in HTML way then check the code below.

<form id="login-form">
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" 
     data-bv-notempty-message="First name cannot be empty" required>
  </div>
  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" required 
     name="confirm_password" data-bv-identical="true"
     data-bv-notempty-message="Confirm password cannot be empty" 
     data-bv-identical-field="password" 
     data-bv-identical-message="The password and confirm password do not match">
  </div>
</form>