jQuery Validation , 自訂錯誤訊息位置

有時候想要透過 jQuery Validation 做簡單的做表單驗證，但是偏偏錯誤訊息顯示在輸入框位置的下方導致HTML排版跑板了

官方文件中提供的方法可以解決這個問題

參考連結 : https://jqueryvalidation.org/documentation/

舉例說明

<div class="form-question">
    <h3>1. 請問您現在的居住地區是？<span></span></span></h3>
        <div class="inputGroup">
            <label class="container">北部(雙北/基隆/桃竹苗)
                <input type="radio" name="q_1[]" value="1" class="required">
                <span class="checkmark"></span>
            </label>
            <label class="container">中部(中彰投/雲林)
                 <input type="radio" name="q_1[]" value="2" class="required">
                 <span class="checkmark"></span>
            </label>
            <label class="container">南部(嘉南/高屏)
                  <input type="radio" name="q_1[]" value="3" class="required">
                  <span class="checkmark"></span>
            </label>
            <label class="container">東部(宜/花/東)
                  <input type="radio" name="q_1[]" value="4" class="required">
                  <span class="checkmark"></span>
            </label>
            <label class="container">離島(澎湖/金/馬)
                   <input type="radio" name="q_1[]" value="5" class="required">
                   <span class="checkmark"></span>
            </label>
     </div>
</div>

<h3>1. 請問您現在的居住地區是？<span></span></span></h3>

<label class="container">北部(雙北/基隆/桃竹苗)

</label>

<label class="container">中部(中彰投/雲林)

</label>

<label class="container">南部(嘉南/高屏)

</label>

<label class="container">東部(宜/花/東)

</label>

<label class="container">離島(澎湖/金/馬)

</label>

</div>

假設我們有一段表單HTML如上，此時想要顯示必填錯誤訊息在問題之後而非選項之後，下列方法可以簡單做到

首先，在HTML上增加一個<sapn></span>，用來顯示必填錯誤訊息

<label class="container">北部(雙北/基隆/桃竹苗) <span class="display_error"></span>
       <input type="radio" name="q_1[]" value="1" class="required">
       <span class="checkmark"></span>
</label>

</label>

接著在script的地方加入參數

$("#form").validate({
     errorPlacement: function(error, element) {
         var placement = $(element).data('error');
         if (placement) {
                $(placement).append(error)
         } else {
                element.parents(".form-question").first().find('.display_error').append(error);
         }
   }
});

$("#form").validate({

errorPlacement: function(error, element) {

var placement = $(element).data('error');

if (placement) {

$(placement).append(error)

} else {

element.parents(".form-question").first().find('.display_error').append(error);

}

});

其中，error是錯誤訊息的dom元件，element則是觸發必填錯誤的元件

所以我們依照HTML結構找到觸發錯誤的元件網上層找到.display_error span，將錯誤訊息append在這個span中，就完成啦～

其他方式可以參考官網文件

延伸閱讀: