form表单中对文本框使用bootstrap的"form-control required"样式,未填依然可以提交
1.代码中设置了必填的样式,但是即使未填也可以提交上去.开始以为是按钮在form表单外面,所以造成了必填样式没作用,后来发现把按钮放进表单中,必填样式依然未生效.后来检查代码发现,button按钮绑定了事件,是通过事件提交,且事件中是对form表单进行提交,所以这里应该是没有问题的.
// 表单中必填的文本框
<form id="_form" name="_form" class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-5">
甲方项目负责人<span class="required"> * </span>:
</label>
<div class="col-md-7">
<input type="text" class="form-control required" id="project_leader_Jia">
</div>
</div>
</div>
</form>
<%@ include file="/***/upload.jsp" %>
// 提交按钮
<div class="row">
<div class="col-md-offset-3 col-md-9">
<input type="button" class="btn green" value="保存" onclick="sub()"/>
<input class="btn default" type="reset" onclick="window.close()" name="button" value="取 消">
</div>
</div>
并且表单提交时,使用了\$("#_form").valid()去验证.但是依旧未生效,还是再给表单中的input加上name属性之后才生效. 但是在有的页面里,不加name属性,用该方法校验又会提示未填.
if($("#_form").valid() == false ){
bootbox.alert("操作失败,请检查各个输入项是否正确!");
return false;
}
2.之后通过查看资料以及别人的代码发现,在加了这个必填样式的input中,不仅需要给一个id,还需要给一个name,如下:
<form id="_form" name="_form" class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-5">
甲方项目负责人<span class="required"> * </span>:
</label>
<div class="col-md-7">
<input type="text" class="form-control required" id="project_leader_Jia" name="project_leader_Jia">
</div>
</div>
</div>
</form>
<%@ include file="/***/upload.jsp" %>
// 提交按钮
<div class="row">
<div class="col-md-offset-3 col-md-9">
<input type="button" class="btn green" value="保存" onclick="sub()"/>
<input class="btn default" type="reset" onclick="window.close()" name="button" value="取 消">
</div>
</div>
3.给input加上name之后,bootstrap的必填样式"form-control required"就生效了.