javascript - 表单无法提交并给出错误消息

Question

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

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

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

当用户选择尺寸时，类 selected添加，因此它会显示 class="size-value selected" 。这个功能运行良好。在我的.js文件我想添加 if/else语句，其中 if <li class="size-value">已被授予类(class)selected (用户点击了这个尺寸)，那么表单将被提交，但是如果NO <li>有类(class) selected ，表单将抛出错误消息。下面是我的函数部分，我认为我应该添加 if/else声明:

}).on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  // Add if/else statement here. if list items have a class selected, form can be submitted. if no list items have class selected, then display this error message.
  $(this).closest("#dialog-addToBag").find('form').submit();
});

我的问题是:我该怎么写这个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();
  }
});

Answer 1

.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();
    }
});

试试这个