如何在使用 jQuery 验证关闭之前验证 Bootstrap 模式

Question

我在 Bootstrap 模式上有一个表单，如果提交，它会获取输入的数据并将其附加到模式后面的表单中...

我需要在模式被解除之前验证这些字段。这是我目前拥有的：

模态：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">
                    &times;
                </button>
                <h3 class="modal-title" id="myModalLabel">add Position</h3>
            </div>
            <div class="modal-body">
                <form name="job_pos" class="form-horizontal">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <div class="controls">
                                    <label for="current_profession" class="col-sm-3 control-label">Job Title</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" required name="job_title" id="job_title" placeholder="Job Title">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
                                    <div class="col-sm-9">
                                        <div class="control-group">
                                            <div class="form-group row">
                                                <div class="col-xs-8">
                                                    <div class="input-group input-daterange" id="dp3" data-date="12/02/2012" data-date-format="mm/dd/yyyy">
                                                        <input class="form-control"id="from" name="from" type="text" readonly="" value="12/02/2012">
                                                        <span style="width: 20px;" class="input-group-addon">to</span>
                                                        <input class="form-control" name="to" id="to" type="text" readonly="" value="12/02/2012">
                                                        <div class="current-position inline" >
                                                            <input class="form-control"  type="text" name="present" disabled="" value="Present">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-3">
                                                <input type="checkbox" class="still_here" id="still_here" name="still_here" aria-hidden="false">
                                                I currently work here
                                            </div>

                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <label for="industries" class="col-sm-3 control-label">industries</label>
                                    <div class="col-sm-9">
                                        <select name="industries" id="industries" multiple="" class="form-control">

                                            {% for k, v in industries_list.iteritems() %}

                                            <option value="{{ k }}">{{ v }}</option>
                                            {% endfor %}

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
                <button type="button" type="submit" id="save" data-dismiss="modal" class="btn btn-primary">
                    Save
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

jQuery：

if ($('#myModal').hasClass('in')) {

            $('#myModal').validate({
                ignore : ':hidden:not("#industries")',
                rules : {
                    job_title : {
                        required : true
                    },
                    industries : {
                        needsSelection : true
                    },
                },
            });

        }

我需要从 jQuery Validation Plugin 调用某种方法吗？
我可以这样验证吗？

更新

我现在正在定位表单，但它仍然无法正常工作。：

$("form[name='job_pos']").validate({
            ignore : ':hidden:not("#industries")',
            rules : {
                job_title : {
                    required : true
                },
                industries : {
                    needsSelection : true
                },
            },
        });

Answer 1

您需要定位表单。 atm 您的目标是模态 div #myModal。 为表单元素添加一个 id 属性，然后更改 jquery 选择器以适合表单的 id。

参考：http://jqueryvalidation.org/

Answer 2

在#myModal 中将div 更改为form。