javascript - 在 HTML javascript 中使用了 'needs-validattion' bootstrap，但它不会进入检查验证方法

Question

我的应用程序中有两个文本字段和一个提交按钮。当我单击提交按钮时，如果任何一个文本字段为空，它应该告诉我“请填写该字段”。所以我在脚本中使用了引导“需求验证”。现在，当我单击提交时，它不会进入验证的 if 或 else 循环。如果条件为真，则应进入 else 循环并执行 ajax 调用。如果 ajax 调用成功，则应向用户发送警报消息。但我没有看到警报消息，并且 POST 调用也没有发生。

我的 HTML 脚本是

        (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
                console.log("I am inside function");
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        console.log("I am inside submit")
                        if (form.checkValidity() === False) {
                            console.log("I am inside true");
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        else {
                            console.log("I am inside else");
                            var departments = $("#role").val();
                            var facultyList = $("#faculty").val().split(',');
                            facultyList.pop();
                            console.log(facultyList);

                            $.ajax({
                                type: 'POST',
                                url: '/departments/add',
                                data: {
                                    'role': departments,
                                    'facultylist': JSON.stringify(facultyList)
                                },
                                success: function (result) {
                                    alert("The department has been added");
                                    document.location.href = "/department";
                                }
                            })
                        }                   
                       
                        form.classList.add('was-validated');
                }, false);
            });
        }, false);
        }) ();

<div class="row top-space-30">
            <form class="needs-validation">
                <div class="form-group row">
                    <label class="col-md-4 col-form-label text-md-right" for="deprole">Department :</label>
                    <div class="col-md-6">
                        <input id="role" name="deprole" type="text" placeholder="QA" class="form-control input-md"
                            required>
                        <div class="valid-feedback">Valid.</div>
                        <div class="invalid-feedback">Please fill out this field.</div>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-md-4 col-form-label text-md-right" for="faculty">Faculties:</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="faculty" required>
                        <input type="hidden" id="TestHidden" value="{{result}}" required>
                    </div>
                </div>

                <div class="col-md-6 offset-md-4 top-space-30">
                    <button type="submit" id="submit">Submit</button>
                </div>
            </form>
        </div>

当我运行脚本时，我可以在控制台日志中看到“我在提交中”。但是，当我单击提交按钮而不输入详细信息时，我在控制台日志中看不到“我是真实的”。但验证将会发生。当我在两个字段中输入详细信息并单击提交按钮时，我在控制台日志中没有看到“我在其他地方”，并且在我的应用程序中也没有看到警报功能

我需要的是:-当我单击包含详细信息的提交按钮时，我应该看到 ajax 调用并且应该看到警报消息。

Answer 1

有一些问题..

• JS bool 值应该是 false 而不是 False
• 无论验证如何，都应调用 preventDefault() 和 stopPropagation()因为您想停止提交按钮的默认行为

演示:https://codeply.com/p/wtSkr8Eucc

  var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {

                event.preventDefault();
                event.stopPropagation();
                if (form.checkValidity() === false) {
                    console.log("I am inside true");
                }
                else {
                    console.log("I am inside else");
                    var departments = $("#role").val();
                    var facultyList = $("#faculty").val().split(',');
                    facultyList.pop();
                    console.log(facultyList);

                    $.ajax({
                        type: 'POST',
                        url: '..',
                        body: {
                            'role': departments,
                            'facultylist': JSON.stringify(facultyList)
                        },
                        success: function (result) {
                            alert("The department has been added");
                        }
                    })
                }                   

                form.classList.add('was-validated');
        }, false);
  });