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标签（适用于所有下拉菜单），其中包含所选的选项...因此，您可以检查其值，如果不同于＆＃39; - ＆＃39;，继续执行脚本，否则将引发错误。

查看实际操作：https://jsfiddle.net/g7bLbevy/

如何在SumoSelect下拉列表中添加jQuery验证？

1 个答案: