Javascript 表单将不提交，并给出错误消息

我有一个包含衣服尺寸的表格。当用户选择尺寸时，他们可以提交表单

我的问题是，无论用户是否选择了尺寸，都可以提交表单。代码要复杂得多，但下面是表单的分解，下面是AddtoBag按钮

<form>
  <ul>
    <li>
      <ul>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
      </ul>
    </li>
  </ul>
</form>
<div class="mt10">
  <input type="submit" class="modalAddToBagButton">
</div>

我的问题是：如何编写这个

if/else

语句？我不知道如何从我的输入按钮访问表单和列表项，因为它们在div之外，并且嵌套得很深，我不知道如何监听是否有任何列表项被指定了类

selected

，以便可以提交表单，如果没有，则抛出错误消息。有人能帮忙吗

---

更新：

此功能用于在未选择大小时不提交表单并显示错误消息，但是即使选择了大小，错误消息仍会出现，表单也不会提交。有人知道为什么吗

.on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  var x = document.getElementsByClassName("es-value");
  var i = x.length;
  var selected = false;
  while (i--) {
    if (x[i].hasAttribute("selected")) {
      selected = true;
    }
  }
  if (selected == false) {
    //Displays error
    $("#errormessage").show();
  } else {

    $(this).closest("#dialog-addToBag").find('form').submit();
  }
});

怎么样

<div id="errorDiv"></div>

怎么样

<div id="errorDiv"></div>

---

以下是我修改您的HTML的方式：

<form id="clothes-sizes">
    <ul>
        <li>
            <ul>
                <li class="size-value"></li>
                <li class="size-value"></li>
                <li class="size-value"></li>
                <li class="size-value"></li>
            </ul>
        </li>
    </ul>

    <div class="mt10">
        <input type="button" class="modalAddToBagButton">
    </div>

</form>

---

以下是我修改您的HTML的方式：

<form id="clothes-sizes">
    <ul>
        <li>
            <ul>
                <li class="size-value"></li>
                <li class="size-value"></li>
                <li class="size-value"></li>
                <li class="size-value"></li>
            </ul>
        </li>
    </ul>

    <div class="mt10">
        <input type="button" class="modalAddToBagButton">
    </div>

</form>

试试这个

---

试试这个

我稍微修改了你的代码：

$（'.modalAddToBagButton'）。打开（'click'，函数（e）{
e、 预防默认值（）；
var x=document.getElementsByClassName（“大小值”）；
var i=x.长度；
选择的var=false；
而(我--){
if（x[i].hasAttribute（“选定”））{
所选=真；
}
}
console.log（'selected:'，x[0].innerText）；
如果（所选==false）{
$（“#errormessage”）.show（）；
}否则{
$（“#dialog addToBag”）.submit（）；
}           
});




1
选择的大小值>2
3
4



我稍微修改了您的代码：


$（'.modalAddToBagButton'）。打开（'click'，函数（e）{
e、 预防默认值（）；
var x=document.getElementsByClassName（“大小值”）；
var i=x.长度；
选择的var=false；
而(我--){
if（x[i].hasAttribute（“选定”））{
所选=真；
}
}
console.log（'selected:'，x[0].innerText）；
如果（所选==false）{
$（“#errormessage”）.show（）；
}否则{
$（“#dialog addToBag”）.submit（）；
}           
});




1
选择的大小值>2
3
4



问题是我无法移动formIt中的按钮。很好，您可以将按钮从表单标签中移出，但通过使用表单#id，您可以在脚本中的任何位置找到表单，只要表单#id是唯一的……因为我在其他人的较大代码中工作，所以无法对jQuery进行太多更改，但是我在代码中添加了if/else语句，即使没有选择大小，表单仍在提交。问题是我无法在表单中移动按钮。很好，您可以将按钮从表单标记中移动出来，但是通过使用表单#id，您可以在脚本中的任何位置找到表单，只要表单#id是唯一的……因为我在其他人的较大代码中工作，我不能对jQuery做太多更改，但我在代码中放置了if/else语句，即使没有选择大小，表单仍在提交。我得到了错误“.hasAttribute不是一个函数”我有点困惑，如果表单有一个属性“selected”，它不会被提交吗而错误会在语句的else部分后抛出？只是在任何类具有“selected”属性时进行了一次编辑以提交，这几乎可以正常工作，但现在即使选择了大小，也会显示错误消息，我无法提交表单。没有提到这些问题。这里有一个修改过的示例，我得到了一个错误“.hasAttribute不是一个函数”我有点困惑，如果表单有一个属性“selected”，那么表单不会被提交吗？错误会在语句的else部分之后抛出？只要在任何类有属性“selected”的时候编辑提交就可以了，但是现在，即使选择了某个大小，并且我无法提交表单，也会出现错误消息。没有提到这些问题。这里有一个修改过的例子
var form = $("#clothes-sizes");
var btn = form.find(".modalAddToBagButton");

btn
.unbind("click")
.bind("click", function ()
{
    var selectedSizes = form.find("ul li.selected");

    if (!selectedSizes.length)
    {
        alert("Please select a size.");

        return false;
    }

    form.submit();
});

.on('click', '.modalAddToBagButton', function(e) {
    e.preventDefault();
    $form = $(this).closest("#dialog-addToBag").find('form');
    if( $( ".size-value.selected" ).length ) { //ho
        $form.submit();
    } else {
        $("#errormessage").show();
    }
});