如果不使用jquery.validate.unobtrusive，只想做些簡單的驗證的話，可以用下面兩種方法來進行表單送出前驗證
1.再<form>加上onsubmit的屬性，此事件是發生在真正submit之前，所以我們可以用以下寫法來做簡易表單驗證
附上Fiddle網址：https://jsfiddle.net/dspeb07n/
<html>
<head></head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<input id = "name" type = "text" value="test">
<button type="submit">submit</button>
</form>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>function validateForm(){
var len = $('#name').val().length;
if(len <= 0){
return false;
}
else{
return true;
}
}
2.使用JQuery + AJAX來進行表單送出前的驗證，與上一個做法比較不同的地方在於把button移出了表單，改由JQuery來控制表單的送出
附上Fiddle網址：https://jsfiddle.net/dspeb07n/2/
<html>
<head></head>
<body>
<form name="myForm" method="post">
<input id = "name" type = "text" value="test">
</form>
<button id = "subbtn" type="submit">submit</button>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>$(function(){
$('#subbtn').on('click', function(){
var len = $('#name').val().length;
if(len <= 0){
return false;
}
else{
$("form").submit();
}
})
})
好的，總結以上，要做表單送出前的驗證有下面3種做法
1.jquery.validate.unobtrusive
2.再<form>裡面加上onsubmit屬性
3.使用<button>搭配JQuery的.submit()方法