我正在尝试使用表单进行引导程序验证。一切正常,但是即使没有选择任何选项,当我按下“提交”按钮时,选择器也会显示为绿色。
empleadosForm.html
<form id="formNuevoEmpleado" ng-submit="vm.submit()" class="needs-validation" novalidate>
<div class="form-group">
<label for="emailInput">Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="name@futurespace.es"
ng-model="vm.email" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Introduce un e-mail válido
</div>
</div>
<div class="row">
<div class="col">
<label for="estadoCivilInput">Estado civil</label>
<select id="estadoCivilInput" class="form-control" ng-model="vm.estadoCivil" aria-describedby="inputGroupPrepend" required>
<option selected>Soltero</option>
<option>Casado</option>
</select>
</div>
<div class="col">
<label for="servicioMilitarInput">Servicio Militar</label>
<select id="servicioMilitarInput" class="form-control" ng-model="vm.servicioMilitar" aria-describedby="inputGroupPrepend" required>
<option selected>Si</option>
<option>No</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="submit" id="enviarEmpleado" class="btn btn-primary" style="background-color: #006cb7">Aceptar</button>
</div>
</form>
</body>
loadFormValidation.js
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
如您所见,我正在使用bootstrap在其网站https://getbootstrap.com/docs/4.3/components/forms/中建议的验证方法,但我读到,bootstrapValidation还有另一种方法,请问哪种方法更好或更该如何改变我的代码以这种方式工作