jQuery 验证在 Bootstrap 4 中不起作用

Question

我正在尝试使用 Bootstrap 4 和 JQuery-validation 实现表单验证，但似乎无法正常工作。

我的表单显示为模态对话框，如下所示：

<div class="modal fade" id="insertWaypointModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Insert Unofficial Waypoint</h4>
                    </div>
                    <form id="theForm">
                        <div class="modal-body">
                            <div>
                                <div style="margin-left:23.5%">Latitude</div>
                            </div>
                            <div id="inputs">
                                <input type="text" placeholder="Name" id="name" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Air way" id="airway" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Latitude" id="latitude" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Longitude" id="longitude" style="margin-right:10px;width:10%"></input>
                                <label for="border">Border</label>
                                <input type="radio" id="border" style="margin-right:5px" />
                                <label for="int">International</label>
                                <input type="radio" id="int" style="margin-right:5px" />
                                <input type="text" placeholder="Code" id="countryCode"></label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="modalSave">Save changes</button>
                        </div>
                    </form>
                </div>

                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

并且我在 $(document).ready() 中添加了表单验证处理程序，如下所示：

$("#theForm").validate({
        rules: {
            airway: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            airway: {
                required: "Please enter some data",
                minlength: "Your data must be at least 8 characters"
            }
        },
        submitHandler: function (form) {
            alert('submitting!');
        }

    });

症状：submitHandler 总是被调用，但验证从未发生。确保在 jquery.validate 和 jquery.addtionalmethods 之前引用 jquery。不确定我做错了什么......

Answer 1

None 个 input 个元素包含一个 name。如果你想使用这个插件，任何考虑验证的元素必须包含一个 name 属性，并且当通过 rules 对象声明规则时，这个 name 被引用，而不是 id.

See the docs:

"Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements."

jQuery 验证在 Bootstrap 4 中不起作用

jQuery Validation not working in Bootstrap 4

jquery

jquery-validate

bootstrap-modal