demoshop

jQuery.validate 的好用不需要我來說明，它的彈性也是眾所皆知，有用過 jQuery.validate 應該都有經驗，如果遇到了 Checkbox 或是 RadioButton 的時候 jQuery.validate 錯誤顯示的位置就十分的詭異，所以就來動手修改它吧。

在預設的情況下 RadioButton 的錯誤會長這樣

十分的難看阿，因為 jQuery.validate 預設的顯示錯誤的方式為

label.insertAfter(element);

就是將錯誤的元素後面增加錯誤訊息，所以當遇到 RadioButton 和 Checkbox是一組的時候就會變成抓到第一個就在後面塞入錯誤訊息的難看畫面了。

---

而 jQuery.validate 提供了許多的 API 來讓開發人員在各種時機下加上自行的擴充或設定，其中一個 errorPlacement 就是來處理本需求的，簡單的使用方法為

$('form').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    }
});

以上是預設行為

---

修改後如下

errorPlacement: function (error, element) {
    if (element.is(':radio') || element.is(':checkbox')) {
        var eid = element.attr('name');
        $('input[name=' + eid + ']:last').next().after(error);
    } else {
        error.insertAfter(element);
    }
}

以上的修改白話文就變成：當發生錯誤的元素屬於 radio 或是 checkbox 的時候找到該錯誤元素的 Name 屬性，再去找到 DOM 中最後一個符合該 Name 的元素，在下一個元素後方加入錯誤訊息。

為什麼要是找到的最後一個的下一個才加上錯誤呢？

因為在正常的情況下 RadioButton 和 Checkbox 後方都會接上 Label ，因此我才這樣寫。

---

依據以上修改後發生錯誤的提示訊息就比較正常了

---

這時候您可能發現，如果每次都要設定一模一樣的 Code 那不是很蠢嗎？還好 jQuery.validate 依然有想到，還是很好心的留了端口給我們，在 setDefaults 的事件下設定的值就會是 Defaults 了

jQuery.extend(jQuery.validator.defaults,
{
    errorPlacement: function (error, element) {
        if (element.is(':radio') || element.is(':checkbox')) {
            var eid = element.attr('name');
            $('input[name=' + eid + ']:last').next().after(error);
        }
        else {
            error.insertAfter(element);
        }
    }
});

利用這種設定法就會方便許多

• Plugins/Validation/Methods
  
• jQuery plugin Validation的7個Callback介紹