I am implementing password rules using span elements. I aim to dynamically remove each span that displays a rule once the input conditions are met. Currently, I have succeeded in removing the span related to the minimum length requirement but I am unsure how to remove the others.
Below is my HTML code:
<input name="user_password" ng-minlength="8" ng-model="passForm.user_password1" id="user_password" type="password">
<label class="left-align" for="user_password">Password*</label>
</div>
<div class="input-field col s12">
<input name="user_password_confirm" ng-model="passForm.user_password2" id="user_password_confirm"
type="password" class="validate">
<span style="color:red" ng-if="passForm.user_password2 && passForm.user_password1 != passForm.user_password2">
<ul>Confirm password do not match.</ul>
</span>
<span style="color:red; display: block !important;">
Password should adhere to the following rules:<br>
</span>
<span style="color:red; display: block !important;" ng-if="!passForm.user_password1 || passForm.user_password1.$error.minlength">
- minimum 8 characters<br>
</span>
<span style="color:red; display: block !important">
- at least 1 uppercase character<br>
- at least 1 lowercase character<br>
- at least 1 digit<br>
- at least 1 special character [@$!#%*?&.]<br>
</span>
And here's my controller:
$scope.changeUserPassword = function(){
var eFlag = false;
$scope.errors = {};
var rePassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&#.])[A-Za-z\d$@$!%*?&#.]{8,}/;
if ($scope.passForm.user_password1 && rePassword.test($scope.passForm.user_password1) == false) {
swal('Error!', "Please enter a password that follows the specified rules",'error');
eFlag = true;
}