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

Posted 2023-05-08

【中文标题】检查表单中的多个 div，如果 div 没有指定的类，请发出警报并阻止提交

【英文标题】：Check multiple div in a form and if div has no specified class do an alert and prevent submit

【发布时间】：2016-08-11 13:19:01

【问题描述】：

好的，我根据一个变量在 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 类时，提交的警报和阻止才有效警报似乎不起作用，并且无论如何都提交了表单...

【参考方案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

【讨论】：

甜蜜！有用！仅当我使用班级更改ID时。再次感谢您的帮助！