使用 Jquery 时引导验证不起作用答案

【问题标题】：Bootstrap Validation Not Working when using Jquery使用 Jquery 时引导验证不起作用
【发布时间】：2018-08-22 14:15:03
【问题描述】：

我的 Bootstrap 验证在表单控件中运行良好，见下图

我的代码是：

<form role="form" data-toggle="validator" id="myform">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">

                            <select class="selectpicker" data-live-search="true" title="Select Teacher" id="ddlMultiTeacher" style="background-color: white" required>
                                <%--<option value="">None</option>--%>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">

                            <select class="selectpicker" data-live-search="true" title="Select Subject" id="ddlMultiSubject" style="background-color: white" required>
                            </select>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">

                            <select class="selectpicker" data-live-search="true" title="Select Class" id="ddlMultiClass" style="background-color: white" required>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">

                            <select class="selectpicker" data-live-search="true" title="Select Section" id="ddlMultiSection" style="background-color: white" required>
                            </select>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-2">
                        <%--                    <button  id="btnSubmit2" class="btn btn-primary btn-block">Save</button>--%>
                        <input id="btnGenerateSchedule" class="btn btn-primary btn-block" type="submit" value="Save" />
                    </div>
                </div>
            </div>
        </form>

但每当我通过 jquery 使用我的按钮提交代码时，我的验证就会停止工作。

$('#btnGenerateSchedule').click(function (e) {
    debugger;
    e.preventDefault();

    bootbox.confirm("<b>Are you sure?</b>", function (result) {
        if (result) {
            GenerateSchedule();
            //bootbox.alert({
            //    title: "Alert",
            //    message: "Your Schedule Has Been Generated !"
            //})
        } else {
            //console.log("User declined dialog");
        }
    });
})

谁能告诉我我做错了什么？我错过了一些插件吗？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap validation

【解决方案1】：

当您编写 jquery 提交或单击事件时，引导或 html 验证不起作用。如果您希望 html/bootstrap 验证应该在 jquery click/submit 事件之前工作，请执行以下操作：

$('#btnGenerateSchedule').click(function (e) {
if($("form")[0].checkValidity()){
    debugger;
    e.preventDefault();

    bootbox.confirm("<b>Are you sure?</b>", function (result) {
       if (result) {
           GenerateSchedule();
       } else {
        //console.log("User declined dialog");
       }
    });
}       });

$("form")[0]) 取决于页面中的表单。如果是页面中的第一个表单，那么 form[0]，如果是页面中的第二个表单，那么 $("form")1) 等等。

详情可以访问链接：html and jquery validation together

【讨论】：

【解决方案2】：

试试这个，

$('form').on('click','#btnGenerateSchedule',function (e) {
debugger;
e.preventDefault();

bootbox.confirm("<b>Are you sure?</b>", function (result) {
    if (result) {
        GenerateSchedule();
        //bootbox.alert({
        //    title: "Alert",
        //    message: "Your Schedule Has Been Generated !"
        //})
    } else {
        //console.log("User declined dialog");
    }
});
})

【讨论】：