Моя проверка Bootstrap отлично работает в элементе управления формой, см. Изображение ниже

enter image description here

Мой код:

<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");
        }
    });
})

Кто-нибудь может сказать мне, что я делаю не так? мне не хватает плагинов?

0
SOS21 14 Мар 2018 в 09:36

2 ответа

Лучший ответ

Когда вы пишете jquery submit или click event, тогда проверка bootstrap или 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]) зависит от формы на странице. Если это первая форма на вашей странице, то форма [0], если это вторая форма на вашей странице, то $ ("form") 1) и так далее.

Для получения дополнительных сведений перейдите по ссылке: проверка HTML и jquery вместе

0
Ishpreet 14 Мар 2018 в 06:56

Попробуй это,

$('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");
    }
});
})
0
Sudhi 14 Мар 2018 в 06:45