jQuery验证在Bootstrap 4中不起作用 [英] jQuery Validation not working in Bootstrap 4

问题描述

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

I am trying to implement form validation with Bootstrap 4 and JQuery-validation, but can't seem to make it work.

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

My form is displayed as a Modal dialog as shown next:

<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()中添加了表单验证处理程序，如下所示:

And I have added the form validation handler in my $(document).ready() as follows:

$("#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!');
        }

    });

症状:总会始终调用commitHandler，但永远不会进行验证.确保在引用jquery.validate和jquery.addtional方法之前先引用jquery.不确定我在做什么错...

Symptom: the submitHandler is always called always but validation never happens. Made sure reference jquery before jquery.validate and jquery.addtionalmethods. Not sure what I am doing wrong...

推荐答案

您的input元素都不包含name.如果要使用此插件，则任何考虑用于验证的元素必须都必须包含name属性，并且在通过rules对象声明规则时，将引用此name，而不是id

None of your input elements contain a name. If you want to use this plugin, any element considered for validation must contain a name attribute and when declaring rules via the rules object, this name is referenced, not the id.

参阅文档:

"必需:所有需要验证的输入元素都需要一个'name'属性，如果没有此功能，该插件将无法使用.'name'属性也必须是表单唯一的，因为这是表单的唯一方式.插件会跟踪所有输入元素."

这篇关于jQuery验证在Bootstrap 4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！