Javascript 使用bootstrap验证表单，即使表单提交时存在一些验证。我应该如何避免它

我使用引导“需要验证”来检查验证表单。在这里，当我单击submit按钮时，字段和表单也会被提交。我想要的是，当验证失败时，表单不应该被提交。我从这里找到了表单验证（需要验证），并在我的程序中使用了它

我的剧本是

<div class="row top-space-30">
            <form class="needs-validation" novalidate action="" method="">
                <div class="form-group row">
                    <label class="col-md-4 col-form-label text-md-right" for="studentname">Student Name:</label>
                    <div class="col-md-6">
                        <input id="role" name="studentname" type="text" placeholder="name" 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="department">Department:</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="department">
                        <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>

    </div>
    <script>
        // Disable form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Get the forms we want to add 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);
        })();

        $("#submit").click(function (e) {
            var studentName = $("#role").val();
            var departmentsList = $("#department").val().split(',');

            $.ajax({
                type: 'POST',
                url: '/students/add',
                data: {
                    'role': studentName,
                    'departmentslist': JSON.stringify(departmentsList)
                },
                success: function (result) {
                    alert("The department has been added");
                    document.location.href = "/department";
                }
            })
        })
    </script>

学生姓名：
有效。
请填写这个字段。
部门：
提交
//如果存在无效字段，则禁用表单提交
（功能（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
//获取要添加验证样式的表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
$（“#提交”）。单击（功能（e）{
var studentName=$（“#角色”）.val（）；
var departmentsList=$（“#department”）.val（）.split（'，'）；
$.ajax({
键入：“POST”，
url:“/students/add”，
数据：{
“角色”：学生姓名，
'departmentslist'：JSON.stringify（departmentslist）
},
成功：功能（结果）{
警报（“已添加部门”）；
document.location.href=“/department”；
}
})
})

试试这个，我有一个用于验证的函数

formSubmit

在该函数中添加您自己的验证

<div class="row top-space-30">
            <form class="needs-validation" name="myForm" action="" method="" onsubmit=" return formSubmit()" >
                <div class="form-group row">
                    <label class="col-md-4 col-form-label text-md-right" for="studentname">Student Name:</label>
                    <div class="col-md-6">
                        <input id="role" name="studentname" type="text" placeholder="name" 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="department">Department:</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" name = "departmentname" id="department">
                        <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>

    </div>


    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

    <script>
        //Disable form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Get the forms we want to add 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);
        })();


        function formSubmit(){

             var forms = document.forms["myForm"];
             var studenName = forms.studentname.value;
             var departmentName = forms.departmentname.value;
             // perform validation for studentname and departname  if they are validated then return true, else for wrong input return false

             if(isNaN(studentname) && isNaN(departmentname)){
                return true;
             }    
             else{
                return false;
             }  

        }       


        $("#submit").click(function (e) {
            var studentName = $("#role").val();
            var departmentsList = $("#department").val().split(',');

            $.ajax({
                type: 'POST',
                url: '/students/add',
                data: {
                    'role': studentName,
                    'departmentslist': JSON.stringify(departmentsList)
                },
                success: function (result) {
                    alert("The department has been added");
                    document.location.href = "/department";
                }
            })
        })

    </script>

学生姓名：
有效。
请填写这个字段。
部门：
提交
//如果存在无效字段，则禁用表单提交
（功能（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
//获取要添加验证样式的表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
form.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
函数formSubmit（）{
var forms=document.forms[“myForm”]；
var studenName=forms.studentname.value；
var departmentName=forms.departmentName.value；
//对studentname和departname执行验证（如果已验证），然后返回true，否则对错误输入返回false
if（伊斯南（学生名）和伊斯南（系名））{
返回true；
}    
否则{
返回false；
}  
}       
$（“#提交”）。单击（功能（e）{
var studentName=$（“#角色”）.val（）；
var departmentsList=$（“#department”）.val（）.split（'，'）；
$.ajax({
键入：“POST”，
url:“/students/add”，
数据：{
“角色”：学生姓名，
'departmentslist'：JSON.stringify（departmentslist）
},
成功：功能（结果）{
警报（“已添加部门”）；
document.location.href=“/department”；
}
})
})

您应该返回

true

或

false

以查看

//您的表单

我不确定该如何返回，我是新手，我复制并粘贴了w3资源中的代码。我尝试在脚本中提供，但仍然无法从

表单

中删除

novalidate

，Tag我尝试了它，这对我没有帮助