使用引导程序验证表单，即使有一些验证表单正在提交。我应该如何避免它

Question

我正在使用引导程序“needs-validation”来检查验证表单。在这里，当我单击提交按钮时，它验证字段和表单也被提交。我想要的是当验证失败时，表单不应该被提交。我从这里https://www.w3schools.com/bootstrap4/bootstrap_forms.asp 找到了表单验证（需要验证），并在我的程序中使用了它。

我的脚本是

<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>

Answer 1

试试这个，我有一个用于验证的函数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>