Question

我正在尝试在作为模态加载的表单上验证两个字段（reason和details）。（如果inputs未加载到模态中，则验证有效）。我不确定这背后的原因是什么。

我将通过网络服务提交，因此我使用$（“＃save”）。点击触发验证，然后将数据发送到服务器。

我的脚本代码：

<script type="text/javascript">
    $(document).ready(function () {

        $('form').validate({
            rules: {
                reason: {
                    minlength: 5,
                    maxlength: 50,
                    required: true
                },
                details: {
                    minlength: 5,
                    maxlength: 999,
                    required: true
                }
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.form-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

        //save new item
        $("#save").click(function () {
          if ($('form').valid() == true) {
              //actions here
            }
        });
    });

    $(function () {
        $("#addEntry").click(function () {
           $('#myModal').modal('show');

        });
    });

</script>

我的HTML

<input id="addEntry" type="button" value="Add new medical entry" class="btn btn-default" />


    <div id="myModal" class="modal fade theindex" role="dialog">
        <form>
        <div class="modal-dialog">

            <!-- Modal content-->

            <div class="modal-content">
                <div class="modal-header btn-success">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add new medical entry</h4>
                </div>
                <div class="modal-body">

                        <h4>Reason</h4>
                       <div class="divDrop">
                            <div class="form-group ">
                                <input class="form-control" id="txtReason" name="reason" type="text" />
                            </div>
                        </div>
                        <h4>Details</h4>
                        <div class="divDrop">
                            <div class="form-group">
                                <textarea class="form-control" rows="5" id="txtDetails" name="details"></textarea>
                            </div>
                        </div>

                </div>

                <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
                <div class="input-group col-xs-12">
                    <h4 class="modal-title leftPad1">Add prescription</h4>
                </div>
                <div class="modal-body">
                    <div class="divCateogyx">
                        <div class="divDrop">
                            <div class="input-group col-xs-12">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-search"></i>
                                </span>
                                <input class="form-control" id="txtMedicine" placeholder="search medicine by name, substance, or package" name="medicine" type="text" />
                            </div>
                            <div class="col-xs-12 h5" id="divSelectedMeds">
                            </div>
                        </div>
                    </div>

                    <br />
                    <br />
                </div>

                <div class="modal-header">
                    <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
                    <h4 class="modal-title">Add media</h4>
                </div>
                <div class="modal-body">
                    <div class="divCateogyx">
                        <div class="divDrop">
                            <div id="accordion5" class="panel-group accordion_5">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-parent="#accordion5" data-toggle="collapse" class="collapsed" href="#item5_2"><span class="fa  accordion_icon"></span>Images, reports, or videos </a>
                                        </h4>
                                    </div>
                                    <div id="item5_2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <dnn:DnnFilePicker ID="dnnFilePicker1" runat="server"></dnn:DnnFilePicker>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br />
                    <br />
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="save">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>

        </div>
            </form>
    </div>

Answer 1

尝试将.validate()方法移动到显示模态后。这样，初始化验证时就存在表单。

$("#addEntry").click(function () {
    $('#myModal').modal('show');  // show the form
    $('#myForm').validate({          // initialize validation on the form
        rules: { ....
        ....
    });
});

此外，由于你的pastbin在模态之外显示另一个form，你必须使用更具体的选择器来定位模态中的form。

验证不会触发模态

1 个答案: