Javascript 验证类中的所有元素

我有一个表单，有一些下拉列表。我想确认在提交表单之前已选择所有下拉列表。元素的id是可变的，所以我不能将它们用作选择器，所以我将所有元素都放在verify类中。因此，现在我需要遍历具有verify类的所有元素，并确保它们不是空的/未定义的/空的。元素的数量也是未知的。我猜我会在某种程度上映射或使用它们，我只是不知道从哪里开始

 $('.verify').change(function()
 {
    //iterate through each item with verify class..


   if (//All items are selected)
   {

       $(":button:contains('Complete')").removeAttr("disabled").removeClass('ui-state-disabled' );
   }

 });

html:

1.
2.
3.
A.
B
C

首先选择包含

所选选项的元素。并将其
长度
与
选择元素的总计数
进行比较。如果计数相同，则已选择所有图元

试试看

试一试

演示：
我建议
$（'.verify'）。而不是（'[value！=''）。长度==0
您可能有点过于复杂了。提交时，循环选择每个
元素。验证
元素并检查其值属性：

$($(".verify:first")[0].form).submit(function(event) {
    var valid = true, $form = $(this);

    $form.find(".verify").each(function() {
        if (/^\s*$/.test(this.value)) {
            valid = false;
            $(this).addClass("ui-state-invalid");
        }
        else {
            $(this).removeClass("ui-state-invalid");
        }
    });

    if (valid) {
        $form
            .find(":button:contains('Complete')")
            .removeAttr("disabled")
            .removeClass('ui-state-disabled');
    }
    else {
        event.preventDefault();
    }
});

您如何提交表格？点击按钮？如果是这样，您可以遍历所有select元素以检查它们是否具有选定的值，然后提交。。。
var $varifies = $('.verify').change(function () {

  var xSelectedElems = $('.verify').filter(function () {
      return $(this).find('option:selected').val() != '';
  }).length;

  var xTotalElems = $('.verify').length;

  $(":button:contains('Complete')").prop("disabled", (xTotalElems != xSelectedElems));

});

var $varifies = $('.verify').change(function () {
    //iterate through each item with verify class..

    var invalid = $varifies.filter(function () {
        return !$(this).val();
    }).length;
    $(":button:contains('Complete')").prop("disabled", invalid);
});

$($(".verify:first")[0].form).submit(function(event) {
    var valid = true, $form = $(this);

    $form.find(".verify").each(function() {
        if (/^\s*$/.test(this.value)) {
            valid = false;
            $(this).addClass("ui-state-invalid");
        }
        else {
            $(this).removeClass("ui-state-invalid");
        }
    });

    if (valid) {
        $form
            .find(":button:contains('Complete')")
            .removeAttr("disabled")
            .removeClass('ui-state-disabled');
    }
    else {
        event.preventDefault();
    }
});