Jquery Image hover submit button + 表單驗證(Jquery validate)

做了幾年的MIS後
又開始寫起了網站程式
(還好都有很認真在自我進修)

這次要寫線上交易網站
而且要跟PAYPAL串接
paypal串接是網站的重點，但不是這篇文章的重點
這篇要說的重點是Jquery的Image submit button.

為了要網站呈現美美的樣子
通常網頁設計都會把button搞得美美的(比方說做成圖)
而且還要滑鼠移過去會變圖
這對於程式設計來說就多了好多的步驟
以前是用Javascript onmouseout onmouseover swapImage
但現在是用Jquery .hover()

一般的表單驗證用google大神就一大堆範例了，我只簡單描述一下
請參考 jQuery Validation Plugin
範例 sample
下載 download

簡單來說就是在head中加入
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

然後Jquery要寫成降:
<script>
$("#Form的ID Name").validate();
</script>

在HTML Form裡面的input要加上 class="required"

這樣就完成了
這是簡單的必填項目，如果需要EMAIL輸入是否正確，或密碼確認之類的功能
在sample的下面也有List of built-in Validation methods的解釋可參考
(看不懂可問我)
這次有使用到submitHandler來完成validate的image submit button

好了，下面要說，Image 怎麼用 Jquery hover 然後又可以 submit 加上validate

Jquery寫成如下:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//須與form表單ID名稱相同
$("#FormIDname").validate({
                //validate的submitHandler
submitHandler: function(form) {
                //須與submit Button ID名稱相同
$('#submitIDName').hover(
                    function(){ //滑鼠移過去要改變的圖
                        $(this).attr({ src : 'images/but_2.png'});
                    },
                    function(){ //滑鼠移走之後及尚未hover的圖
                        $(this).attr({ src : 'images/but_1.png'});                }
                    );
form.submit(); // 這個一定要有，不然不能submit
  }
});
});
</script>

Form的ID要與Jquery Validate相同
<form method="post" id="FormIDname" name="Form1" action="joinin.php">

Form的input要加上 class="required"
<input name="name" type="text" size="45" id="name" class="required" />

image hover submit button的地方要改成
<input id="submitIDName" name="submit" src="images/but_1.png" type="image" />
(還沒hover過去的圖)


完成 =.=
我相信有看沒有懂，但不懂就要問