使用bootstrap的"form-control required"样式遇到的问题

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()"/>&nbsp; &nbsp;
						 <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()"/>&nbsp; &nbsp;
			<input class="btn default" type="reset" onclick="window.close()" name="button" value="取 消">
	</div>
</div>

3.给input加上name之后,bootstrap的必填样式"form-control required"就生效了.
成功后的效果

这里按钮放在form表单外面是因为前面引用的jsp页面需要在form外面,而按钮需要在引入的页面内容后面.
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值