我一直坚持通过 Jquery 添加和删除引导验证器类。如果 div 可见,我将添加验证,如果 div 隐藏,则删除。这是我的尝试:
<!--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代码: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);
}
}
如果 div 可见或隐藏,则验证工作。但确认密码与密码字段的数据不匹配。请帮助我如何根据 div 的可见性匹配密码并确认密码字段?
最佳答案
您可以通过切换 .display-none
来实现此目的。类如下例所示。
function validateField() {
let cont = $('#passwordForm');
if (cont.hasClass('display-none')) {
cont.removeClass('display-none');
$("#password").attr('data-bv-validatorname', true);
$("#password2").attr('data-bv-validatorname', true);
} else {
cont.addClass('display-none');
$("#password").attr('data-bv-validatorname', false);
$("#password2").attr('data-bv-validatorname', false);
}
console.log(`$("#password").attr('data-bv-validatorname') is ${$("#password2").attr('data-bv-validatorname')}`);
console.log(`$("#password2").attr('data-bv-validatorname') is ${$("#password2").attr('data-bv-validatorname')}`);
}
$('#passwordForm').bootstrapValidator({
message: 'This value is not valid',
live: 'enabled',
fields: {
password: {
message: 'The password is not valid',
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The passwords must match. '
},
stringLength: {
min: 6,
max: 30,
message: 'The password must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The password can only consist of alphabetical, number and underscore'
}
}
},
password2: {
message: 'The password2 is not valid',
validators: {
notEmpty: {
message: 'The password2 is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The passwords must match. '
},
stringLength: {
min: 6,
max: 30,
message: 'The password2 must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The password2 can only consist of alphabetical, number and underscore'
}
}
}
}
});
$('a.accountFormToggleBtn').on('click', function() {
validateField();
});
.display-none {
display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<!--hidden form field-->
<div class="form-group">
<a 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" data-bv-identical placeholder="Password" name="password" class="form-control" value="" data-bv-notemty 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-notemty data-bv-excluded="false" data-bv-identical required>
<button class="btn btn-default" id="save">Save password</button>
</div>
</div>
</div>
关于javascript - 使用引导验证器验证密码并确认密码字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32580606/