form表单添加ajax校验

form表单添加ajax校验

<button type="button" id="register" class="btn btn-primary btn-block btn-flat" onclick="register()">Register</button>

button的类型由submit更改为button，添加onclick事件。

function register() {     if($("#terms").val() != "1"){         alert("Do you agree to the terms?");         return false;     }else{         $("#rForm").submit();     } }

表单

<form:form modelAttribute="registerDTO" id="rForm" action="${pageContext.request.contextPath}/register/register" method="post">

这里button也可以不添加onclick事件，js采用

$("#register").click(function () {    //do something  })

同时表单的提交也可以不放在js中，采用onsubmit=”return checksubmit()方式检验表单数据的合法性。

这里关于checkbox的取值与设值需要注意一下，
设值：onclick=”this.value=this.checked?1:0”。
取值：$(“#terms”).val()

1、获取单个checkbox选中项(三种写法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项

$('input:checkbox').each(function() {        if ($(this).attr('checked') ==true) {                alert($(this).val());        }});

checkbox的具体取值参见http://www.jb51.net/article/46469.htm

以上代码完成后，点击button始终是无反应，打开F12调试工具，发现函数不存在。最终发现是由于button嵌套在form内部，导致表单没法提交。具体原因还不是太明白||====。