form表單添加ajax校驗

form表單添加ajax校驗

<button type="button" id="register" class="btn btn-primary btn-block btn-flat" οnclick="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中，採用οnsubmit=”return checksubmit()方式檢驗表單數據的合法性。

這裏關於checkbox的取值與設值需要注意一下，
設值：οnclick=”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內部，導致表單沒法提交。具體原因還不是太明白||====。