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