Bootstrap 如何在使用jQuery验证解除引导模式之前验证引导模式

a11xaf1n  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(158)

我在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
                },
            },
        });
cygmwpex

cygmwpex1#

您需要将form.atm定位为模式div #myModal。向表单元素添加一个id属性,然后更改jquery选择器以适合表单的id。
参考:http://jqueryvalidation.org/

cnh2zyt3

cnh2zyt32#

#myModal中,将div更改为form

相关问题