如何将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/