javascript - Bootstrap 模式中的 jQuery 验证不会触发

Question

好吧，我正在尝试使用 jQuery 验证来验证模式内的表单。然而，我的 jQuery 验证根本没有触发，甚至没有错误。我已经使用了调试，并且有一个警告:

Nothing selected, can't validate, returning nothing.

这些是我的代码:

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Form Add Question Category</h4>
        </div>
        <form id="form_input" method="post" action="">
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <input type="hidden" id="submit_type" name="submit_type" value="address_insert"/>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label for="txtDeviceID">Device ID</label>
                                    <input type="text" class="form-control" id="txtDeviceID" name="txtDeviceID" placeholder="Device ID"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label for="txtPassword">Password</label>
                                    <input type="text" class="form-control" id="txtPassword" name="txtPassword" placeholder="Password"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label>Employee</label>
                                    <select class="select2_employee" name="select2_employee" style="width:100%"></select>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-12 col-xs-12">
                                    <label>Branch</label>
                                    <select class="select2_branch" name="select2_branch" style="width:100%"></select>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtIPLocal">IP Local</label>
                                    <input type="text" class="form-control" id="txtIPLocal" name="txtIPLocal" placeholder="IP Local"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtPortLocal">Port Local</label>
                                    <input type="text" class="form-control" id="txtPortLocal" name="txtPortLocal" placeholder="Port Local" />
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtIPPublic">IP Public</label>
                                    <input type="text" class="form-control" id="txtIPPublic" name="txtIPPublic" placeholder="IP Public"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtPortPublic">Port Public</label>
                                    <input type="text" class="form-control" id="txtPortPublic" name="txtPortPublic" placeholder="Port Public"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtIPAlternative">IP Alternative</label>
                                    <input type="text" class="form-control" id="txtIPAlternative" name="txtIPAlternative" placeholder="IP Alternative"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <label for="txtPortAlternative">Port Alternative</label>
                                    <input type="text" class="form-control" id="txtPortAlternative" name="txtPortAlternative" placeholder="Port Alternative"/>
                                    <div class="error_validation" style="color:red; font-size:9px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" value='Submit' class="btn btn-md btn-primary" >Submit</button>
                <button type="button" class="btn btn-md btn-default" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>
</div>

JavaScript:

var validate_start = $("#myModal #form_input").validate({
                debug: true,
                ignore: [],
                rules: {
                    txtDeviceID: {
                        required: true
                        //                        lettersOnlySpace: true,
                        //                        minlength: 5,
                        //                        maxlength: 15
                    },
                    txtPassword: {
                        required: true
                    },
                    select2_employee: {
                        required: true
                    },
                    select2_branch: {
                        required: true
                    },
                    txtIPLocal: {
                        required: true
                    },
                    txtPortLocal: {
                        required: true,
                        number: true,
                        range: [1, 65535]
                    },
                    txtIPPublic: {
                        required: true
                    },
                    txtPortPublic: {
                        required: true,
                        number: true,
                        range: [1, 65535]
                    },
                    txtIPAlternative: {
                        required: true
                    },
                    txtPortAlternative: {
                        required: true,
                        number: true,
                        range: [1, 65535]
                    }
                },
                //                messages: {
                //                    txtDeviceID: {
                //                        required: "Input required."
                //                    },
                //                    txtPassword: {
                //                        required: "Input required."
                //                    },
                //                    select2_employee: {
                //                        required: "Input required."
                //                    },
                //                    select2_branch: {
                //                        required: "Input required."
                //                    },
                //                    txtIPLocal: {
                //                        required: "Input required."
                //                    },
                //                    txtPortLocal: {
                //                        required: "Input required."
                //                    },
                //                    txtIPPublic: {
                //                        required: "Input required."
                //                    },
                //                    txtPortPublic: {
                //                        required: "Input required."
                //                    },
                //                    txtIPAlternative: {
                //                        required: "Input required."
                //                    },
                //                    txtPortAlternative: {
                //                        required: "Input required."
                //                    }
                //                },
                errorPlacement: function (error, element) {
                    console.log("validate success!");
                    error.appendTo(element.siblings('.error_validation'));
                },
                submitHandler: function (form) {
                    console.log(form);
                    //                    $.ajax({
                    //                        url: $("#submit_type").val(),
                    //                        type: 'POST',
                    //                        dataType: 'JSON',
                    //                        data: function (params) {
                    //                            console.log("parameter");
                    //                            console.log(params);
                    //                            return JSON.stringify($(form).serialize());
                    //                        },
                    //                        //                        data: $(form).serialize(),
                    //                        success: function () {
                    //                            //                             $(form).html("<div id='message'></div>");
                    //                            //                             $('#message').html("<h2>Your request is on the way!</h2>")
                    //                            //                                 .append("<p>someone</p>")
                    //                            //                                 .hide()
                    //                            //                                 .fadeIn(1500, function () {
                    //                            //                                 $('#message').append("<img id='checkmark' src='images/ok.png' />");
                    //                            //                             });
                    //                        }
                    //                    });
                    return false; // required to block normal submit since you used ajax
                },
                invalidHandler: function (event, validator) {
                    // 'this' refers to the form
                    var errors = validator.numberOfInvalids();
                    console.log("error " + errors);
                }
            });

我已经尝试了很多解决方案，从修复模态体内的表单，使用不显眼的库，但它仍然不想触发。请帮助我，触发验证的一条线索就足够了，我稍后会跟进。

谢谢。

Answer 1

尝试在模式显示后立即初始化验证代码。如果你有类似 $('#myModal').open() 的东西，那么你必须在 open 方法之后初始化验证。我相信这与 DOM 操作有关。