使用JQuery，但不使用JQuery validate 来验证表单非空情况

        需求：表格分为主表与子表，见图。主表项个数不变（题目、排序序号、是否必填、是否多选），子表动态生成（每点击一次新鲜选项内容，生成一组选项名称，排序序号，是否默认选择）在点击“保存”，验证主表项非空，以及子表项非空。

    难点：子表变化可能为 “删除一组，增加一组，组数不变数据变化，组数增加同时数据变化”。

    解决思路：分为前后台同时解决

前台：在点击“保存”时，判断主表内容是否为空（这很简单），同时判断动态子表是否为空（难点）。

后台：获取动态子表生成的Json串，解析为一个List对象，判断这个对象的 size() 是否为3。如果是，则进行数据库操作；不是，则拦截返回页面。

    实现步骤：

前台：

1、给“保存”按钮从 submit类型修改为 button 类型，防止按钮强制提交，而不进行非空方法判断。

2、将表单<form> 标签中的action属性改为“”（空值），通过添加一个 <input  type="hidden"> 来保存要发送的表单URL。

3、用Jquery为“保存”按钮设置点击验证事件：主表判断是否每个空格都有值；子表因为动态生成，所以统计子表需要填的空格的数量，在统计子表空格中已经添入数值的数量，用两个数值比较，如果数值一致则提交，不一致则拦截。

$(document)
			.ready(
					function() {
						var optLen;
						var selectLen;
						var j;
						$("#btnSubmit").click(function() {
							/*
							 * 验证question项
							 */
							var title = $(".control-group > .controls> input[name='title']").val();
							//alert("title="+title);
							if(title =='' || title ==undefined || title == null){
								$(".sku-custombar > span >font").text("有未填的数据，请填写！");
								return;
							}
							var sequence = $(".control-group > .controls> input[name='sequence']").val();
							//alert("sequence="+sequence);
							if(sequence =='' || sequence ==undefined || sequence == null){
								$(".sku-custombar > span >font").text("有未填的数据，请填写！");
								return;
							}
							
							
							/*
							 * 验证option项
							 */
							optLen = $(".marginright5 > input[type='text']").get().length;
							j = 0;
							for (var i = 0; i < optLen; i++) {
								var obj = $(".marginright5 > input[type='text']").get();

								var value = $(obj[j]).val();
								if (value != undefined && value != null && value != '') {
									j++;
								}
							}
							if (j != optLen) {
								$(".sku-custombar > span >font").text("有未填的数据，请填写！");
								return;

							} else {
								var form_action = $('#form_action').val();
								$(".sku-custombar > span >font").text("");
								//alert(form_action);
								$('#inputForm').attr('action',form_action) ;
								$("#inputForm").submit();
							}

						});
}

4、拦截效果图

=================================================================

下面介绍后台拦截判定：

1、在《利用Jquery+JS生成Json串，动态创建添加项》一文中，生成了子表的Json串儿。在后台创建一个解析该字符串儿的 JavaBean。包含两个字段，key值和value值。其中的 value 值是一个List结合，用来包含一组子表中的数据。

public class FeedBackOptJSONBean {
	@JSONField(name="key")
<pre name="code" class="java"><pre name="code" class="java">	<span style="font-family: Arial, Helvetica, sans-serif;">private String optionName;</span>

@JSONField(name="value")private List<String> options;}

2、解析Json串儿，判断JSON串儿对象中的 List<String>是否含有4个数值（来自前台子表的 id, name, sequence, selected），如果数量不足4个，返回该页面。如果满足，将数据交给Service层提交给DB。

if(StringUtils.isNotBlank(optJson)){
			List<FeedBackOptJSONBean> optionList = JSON.parseArray(optJson, FeedBackOptJSONBean.class);
			newOptionList = new ArrayList<FeedbackOptionsBeans>();
			
			for (FeedBackOptJSONBean optJSONBean : optionList) {
				if (optJSONBean.getOptions().size()<4) {
					String message = "有未填数据，修改失败";
					return "redirect:" + adminPath + "/personal/feedback/editfeedbackByquestionId?questionId="
							+questionId+"&feedbackId="+feedbackId+"&type="+type+"&message="+message;
				}else{
					FeedbackOptionsBeans newOption = new FeedbackOptionsBeans();
					newOption.setOptionId(optJSONBean.getOptions().get(0));
					newOption.setName(optJSONBean.getOptions().get(1));
					newOption.setSequence(Integer.parseInt(optJSONBean.getOptions().get(2)));
					newOption.setChecked(Integer.parseInt(optJSONBean.getOptions().get(3)));
					
					newOptionList.add(newOption);
				}
			}
			
			feedbackService.deleteOptionnFeedback(questionId);
			
			for (FeedbackOptionsBeans opt : newOptionList) {
				
				feedbackService.saveOptionWithQuestionId( opt, questionId);
			}
		}

3、以上完成了后台验证。