如何將jQuery驗證添加到SumoSelect下拉列表中？

Question

我正在尋找一種方法來驗證多個相撲選擇框。我擁有的代碼如下。

HTML

<select class="kid-age form-select" id="edit-age-big-kid-1" name="age_big_kid_1">  
    <option value="">-</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
</select> 

<select class="kid-age form-select" id="edit-age-big-kid-2" name="age_big_kid_2">  
    <option value="">-</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
</select> 

<select class="kid-age form-select" id="edit-age-small-kid-1" name="age_small_kid_1">  
    <option value="">-</option> 
    <option value="3">0</option> 
    <option value="4">1</option> 
    <option value="5">2</option> 
</select> 

JS

$('.kid-age').SumoSelect(); 

如何可以被需要客戶端驗證所有的下拉菜單的（可能有多個），並顯示單個消息「所有的孩子都需要。「

在此先感謝！

Answer 1

這裏是快速和簡單的驗證，但它會給你的想法，你可以修改它以滿足您的需求：

$(document).ready(function() { 

    $('.kid-age').SumoSelect(); 
    $('#submit').on('click', function() { 
     errors=[]; 
     $('p.SelectBox').each(function() { 

      if($(this).attr('title')==" -") { 



       errors.push('invalid'); 

      } 

     }); 

     if(errors.length>0) { // if there are errors, show message, stop submission, etc... 
       message='All kid ages are required.'; 
       $('.error').text(message); 
      } 
      else { //if no errors, continue with script execution... 
       $('.error').text('fields validated'); 
      } 
    }); 


}); 

插件創建一個特定的p標籤（適用於所有下拉菜單）持有選擇的選項。 ..所以，你可以檢查它的值，如果不同於' - '，繼續執行腳本，否則會拋出錯誤。

看到它的行動：https://jsfiddle.net/g7bLbevy/