我在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">
×
</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
},
},
});
2条答案
按热度按时间cygmwpex1#
您需要将form.atm定位为模式div
#myModal
。向表单元素添加一个id属性,然后更改jquery选择器以适合表单的id。参考:http://jqueryvalidation.org/
cnh2zyt32#
在
#myModal
中,将div
更改为form
。