我在一个模态中有一个带有一些必填字段的表单,但是当我点击提交时,表单只是重新加载,我没有得到任何用于提交表单jQuery的验证消息,如下所示:
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
Twitter Bootstrap模式代码是:
<!-- Modal1 -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="InfroText" method="POST">
<input type="hidden" name="InfroText" value="1"/>
<table>
<tr><td>Title</td><td><input type="text" name="title" style="width:300px" required="require"/></td></tr>
<tr><td>Introudction</td><td><textarea name="contect" style="width:300px;height:200px"></textarea></td></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="InfroTextSubmit">Save changes</button>
</div>
</div>
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
那么我怎样才能验证表格,如果表格有问题,不要让模型关闭并重新加载?
此致
答案 0 :(得分:8)
如果添加了必需的属性,则无需添加任何用于验证表单文本字段的脚本。
试试这个
<input type="text" name="title" style="width:300px" required="required"/>
或
<input type="text" name="title" style="width:300px" required/>
答案 1 :(得分:3)
您可以将"data-dismiss=modal"
添加到InfroTextSubmit按钮,然后在“#InfroTextSubmit
”点击功能上使用“return false”来阻止表单关闭。如果表单有效,请调用'submit()'。
按键代码:
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>
点击功能:
$('#save').click(function(){
if ($('#myField1').val()==="") {
// invalid
$('#myField1').next('.help-inline').show();
return false;
}
else {
// submit the form here
$('#InfroText').submit();
return true;
}
});
验证本身有几种不同的方法。
使用Bootply :http://bootply.com/60244