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

Question

好的，我在 php 中根据变量动态创建了多个 div，我想检查每个 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换成class