星期日, 12月 21, 2014

[jQuery Plugin] required depends 讓驗證欄位基於其他特地條件成立

如果你使用jquery validator要讓required規則依特地條件成立才驗證的話, 可以使用呼叫的depends方法,並自訂規則:D
$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});

Reference
jquery validate depends rule

[jQuery API] 小心元素undefined的操作,而引起的getAttribute

當操作使用jquery selector操作未定義的物件所引起的getAttribute的錯誤的小地雷


Uncaught TypeError: Cannot read property 'getAttribute' of undefined
var iframe = $("#videoIntro")[0];
       if (typeof(iframe) != "undefined") {
           var player = $f(iframe);
}

星期二, 12月 09, 2014

[jQuery Mobile] 設定select menu的初始化

想要指定select menu的初始化的話只要設定val就好了,但要記得refresh一下

範例:

  $('#frmAnalytics_ReportGroup').val('avg').selectmenu('refresh');

星期四, 12月 04, 2014

[jquery plugin] jquery validator 驗證多個選取盒checkbox

常用的需求,怕忘記直接寫個範例記一下。
以下範例介紹如何透過jquery validator來驗證多個checkboxes,
可以透過minlength參數來指定選取數量

HTML

欲代理區域:
                        <input type="checkbox" id="north" name="area" value="north" /> 北部
                        <input type="checkbox" id="central" name="area" value="central" /> 中部
                        <input type="checkbox" id="south" name="area" value="south" /> 南部
                        <input type="checkbox" id="east" name="area" value="east" /> 東部


JS範例

$validatedContact
   = $("#contactForm").validate({
    rules: {

     //共同 checkbox
     area: {
      required: true
      ,minlength: 2
     }
},
messages:{
area: {
      required: "區域未選取"
      ,minlength: "至少選取二個區域"
     }
},
 submitHandler: function(form) {
}
});


結果



[jQuery plugin] 移除已初始化過的jquery validator

今天有一個頁面需求,需求在切換不同type的時候,變更不同的form的顯示的欄位, 為了方便就是重設jquery validator,可以透過以下範例重設form的validator

範例

$("#contactForm").data("validator", null);
  $("#contactForm").unbind("validate");
  $("#contactForm").removeData("validator")
  $("#contactForm").unbind("submit");//必需移除submit的行為,不然會多重綁定

星期三, 12月 03, 2014

[Javascript] Timer議題: setTimeout 與 setInterval的筆記

最近用timer來實作dashboard相關的機制,順便查一查筆記一下:d

字面上說明

Timeout  ==>逾時
Interval  ==>間隔


定義:

Javascript的計時功能提供了setTimeout與setInterval這兩種用法,執行後會取得一個Timer ID。
要取消計時可以用的分別是clearTimeout()和clearInterval(),然後把執行後取得的Timer ID殺掉即可

兩者差別:


setTimeout()只做一次;setInterval()會不停的的調用函數。



運作原因:

由於javascript是只有單一執行緒,因此只是告訴Js在某一段時間後,再插入執行你指定的函式