jQuery開發筆記－jQuery Validate及ie 7的相容問題

需求

1. 表單填資料，表單所在頁面是html，所以只能用javascript
2. 送出要檢查必填及勾選個資使用同意
3. 資料轉成mail寄出
4. 相容到IE 7

需求是很簡單，但若只能用javascript，相容到IE 7就是個大問題，我檢查資料用的是jquery validate這個plugin，似乎也加重這問題，要比較後面的版本才相容，但jquery越後面的版本就越是放棄相容舊的IE，最後是總結如下：

1. 使用jQuery 1.6.1
2. 使用jQuery validate 1.8.1（在這jquery 1.8.1 download可以下載）

jQuery validate 1.8.1在選擇要檢查的element跟jQuery validate 1.11.1不同，例如：
jQuery validate 1.8.1： <input type="text" value="" class="required" />
jQuery validate 1.11.1： <input type="text" value="" required />

使用上jQuery validate 1.11.1比較方便，但相容性只到IE 8（使用jQuery 1.7.2的情況下）。

設定上也很容易，大概如下使用，可以在按下submit後，檢查下有
$('#myform').validate({


    submitHandler:function(form){

        //驗證成功準備要submit前

        if( !$('#check').prop('checked') ) alert('請勾選');

        else {
            //這邊我用ajax
            $.ajax({
                url: "mail.php", //自己寫好的mail，phpMail寫的

                async:false,
                type: "POST",
                data: $( "#myform" ).serialize(),

                success: function(data) {
                    alert(data);

                    $( "#myform" )[0].reset();
                }
            });
        }
    },
    messages: {
        //針對name及tel，指定沒填時要顯示的提示
        name: { required: ' 請輸入'},
        tel: { required: ' 請輸入'}
    }
});

相對應的element如下
<form id="myform" method="post" action="">
<input type="text" name="name" class="required">
<input type="text" name="tel" class="required">
</form>

css可以改成這樣（取自jQuery Validation Plugin Demo的demo）

<style type="text/css">
    label.error, label.error {
        color: red;
        font-style: italic;
    }
    input.error, textarea.error, checkbox.error {
        border: 2px dotted red;
    }
</style>

最後要將form的資料reset，要用$('#myform')[0].reset()，這樣才能正常抓到form這個element，因為$('#myform')是jQuery的物件，而reset()是Element的function


jQuery plugin Validation的7個Callback介紹
jQuery Validation Plugin Demo
jQuery Validation Plugin
jQuery Validation not working in IE7 + IE8

form reset
How to reset (clear) form through javascript?