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

Question

OK, I have a multiple divs dynamically created in php depending on a variable and I would like to check for each of them if it has a certain class. When I upload an image which will then append the image in the <div id="img-pick">, and add a class allocated. I would like to check if one or any of the divs does not have the allocated class then do an alert and stop the form from being submitted when clicked on the submit button unless all the <div id="img-pick"> have the class allocated to them.

This is my code for the form:

<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>

And this is the javascript:

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

With this script, the alert and the prevent of the submit works only when none of the <div id="img-pick"> has the allocated class, but if one or more, but not all of them, has the allocated class then the alert doesn't seem to work and the form gets submitted anyway...

Answer 1

Use a loop:

$('#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();}
});

or:

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

Note: change the id with a class