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

Posted 2023-05-08

【中文标题】使用 Jquery 时引导验证不起作用

【英文标题】：Bootstrap Validation Not Working when using 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");
        
    );
)

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

【参考方案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");
    
);
)