Wednesday, 4 November 2020

Validate password and confirm password fields using bootstrap validator

I have stuck with adding and removing the bootstrap validator class through Jquery. I am adding validation if div is visible and remove if div is hidden. Here is my try:

<!--hidden form field-->
<div class="form-group">
    <a href="javascript:validateField();" class="theme-color accountFormToggleBtn display-block">click here to change your password</a>

    <div class="accountFormToggle display-none" id="passwordForm"> 
      <div class="col-md-5">
        <label for="password">Password</label>
        <input type='password' id="password" placeholder="Password" name='pass' class="form-control"  value='' data-bv-excluded="false" required>
      </div>

      <div class="col-md-5 col-md-offset-1">
        <label for="exampleInputEmail1">Confirm password</label>
        <input type='password' id="password2" placeholder="Confirm password" name='password2' class="form-control" value='' data-bv-excluded="false" data-match="#password" required> 
      </div>
    </div> 
</div>

JS Code:

function validateField() {

    if($('#passwordForm').is(':visible')) {  
        $("#password").attr('data-bv-excluded',true);   
        $("#password2").attr('data-bv-excluded',true);
    } else {
        $("#password").attr('data-bv-excluded',false);   
        $("#password2").attr('data-bv-excluded',false);
    }
}

Validation is working if div gets visible or hidden. But confirm password is not matching data with password field.

Please help me how i can match the password and confirm password fields as per visibility of div?



from Validate password and confirm password fields using bootstrap validator

No comments:

Post a Comment