jQuery 在 Twitter Bootstrap 模型中验证表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16273641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validating a form in Twitter Bootstrap Model
提问by test
I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don't get any message for validation that I am using for submitting the form jQuery, as below :
我有一个带有一些必填字段的模态表单，但是当我点击提交时，表单只是重新加载，我没有收到任何用于提交表单 jQuery 的验证消息，如下所示：
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
The Twitter Bootstrap Modal Code is :
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>
So how can i Validate the Form and not let the model close and reload if something is wrong with the form ?
那么，如果表单出现问题，我如何验证表单而不让模型关闭并重新加载？
Regards,
问候，
回答by iCode
You don't have to add any script for validating form text fields if you added the required attribute.
如果添加了 required 属性，则不必添加任何脚本来验证表单文本字段。
Try this
尝试这个
<input type="text" name="title" style="width:300px" required="required"/>
<input type="text" name="title" style="width:300px" required="required"/>
or
或者
<input type="text" name="title" style="width:300px" required/>
<input type="text" name="title" style="width:300px" required/>
回答by Zim
You can add "data-dismiss=modal"to the InfroTextSubmit button, and then use 'return false' on the '#InfroTextSubmit' click function to prevent the form from closing. If the form is valid you call 'submit()'.
您可以添加"data-dismiss=modal"到 InfroTextSubmit 按钮，然后在“ #InfroTextSubmit”单击函数上使用“return false”以防止表单关闭。如果表单有效，则调用“submit()”。
Button code:
按钮代码：
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>
Click function:
点击功能：
$('#save').click(function(){
if ($('#myField1').val()==="") {
// invalid
$('#myField1').next('.help-inline').show();
return false;
}
else {
// submit the form here
$('#InfroText').submit();
return true;
}
});
There a several different approaches to the validation itself.
验证本身有几种不同的方法。
Working on Bootply: http://bootply.com/60244
在 Bootply 上工作：http: //bootply.com/60244
