检查表单中的多个div，如果div没有指定的类，则执行警报并阻止提交

Question

好吧，我有一个动态创建的多个div，取决于一个变量，我想检查每个，如果它有一个特定的类。 当我上传一个图像然后将图像附加到<div id="img-pick"> ，并添加一个allocated的类。 我想检查一个或任何一个div是否没有allocated类然后做一个警报并在单击提交按钮时停止提交表单，除非所有<div id="img-pick">都有allocated给他们的班级。

这是我的表单代码：

<form action="" method="POST" id="image-form">
<div class="row options-heading"><h3>UPLOAD <?php echo $loopvalue; ?> IMAGES</h3></div>
<div class="row options-content">
  <div class="grid-wrapper <?php echo $model; ?> <?php echo $option_style; ?> ui-sortable clearfix">
    <?php for ($i = 1; $i <= $loopvalue; $i++)  : ?>
    <div class="<?php echo $col_setting; ?> grid-item">
        <div id="img-pick" class="<?php echo $option_shape; ?>">
            <a href="#" class="add tooltip" data-tip="Click to Upload"></a>
            <div class="tools">
                <a href="#" class="del tooltip" data-tip="Remove image?"></a>
            </div>
            <a href="#" class="reset tooltip" data-tip="Upload stalled? Click to reset"></a>
        </div>
    </div>
    <?php endfor; ?>
  </div>
</div>
<div class="row options-nav-btn">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"><input type="submit" class="btn btn-success pull-right" value="Continue" id="collectImages"></div>
</div>
</form>

这是javascript：

$('#collectImages').click(function()
  if(!$('#img-pick').hasClass("allocated"))
  {
    sweetAlert("Oops...", "You haven't finished picking your images", "error");
    return false;
  }
});

使用此脚本，仅当<div id="img-pick">没有allocated类时，警报和阻止提交才有效，但如果一个或多个（但不是全部）具有已allocated类，则警报似乎不起作用，表单仍然提交...

Answer 1

使用循环：

$('#collectImages').click(function(e) {
e.preventDefault();
var valid = true;
$('#img-pick').each(function(){
   if(!$(this).hasClass("allocated"))
  { 
   valid = false;
  }
});
 if (!valid) {
 sweetAlert("Oops...", "You haven't finished picking your images", "error");
 } else {$(this).closest('form').submit();}
});

要么：

$('#collectImages').click(function()
  if($('#img-pick').length != $("#img-pick.allocated").length)
  {
    sweetAlert("Oops...", "You haven't finished picking your images", "error");
    return false;
  }
});

注意：使用类更改id