引导选择器验证不起作用

时间:2019-10-09 08:28:04

标签: javascript html angularjs bootstrap-4

我正在尝试使用表单进行引导程序验证。一切正常,但是即使没有选择任何选项,当我按下“提交”按钮时,选择器也会显示为绿色。

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还有另一种方法,请问哪种方法更好或更该如何改变我的代码以这种方式工作

0 个答案:

没有答案
相关问题