表单不会提交并给出错误信息

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>

当用户选择尺码时，会添加 class selected，因此它会显示为 class="size-value selected"。此功能工作正常。在我的 .js 文件中，我想添加一个 if/else 语句，如果 <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 之外并且非常嵌套，并且要监听是否已为任何列表项提供 class 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

怎么样

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

在你的javascript函数中

}).on('click', '.modalAddToBagButton', function(e) {
        e.preventDefault(); 

       var x = document.getElementsByClassName("size-value");
       var i = x.length;

       var selected = false;

       while(i--)
       {
           if (x[i].hasAttribute("selected"))
           {
              selected = true;        
           } 
       }

       if(selected == false)
       {
           //Displays error
           document.getElementById("errorDiv").innerHTML = "Please select a size.";

       } else {

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

Answer 2

我会这样修改你的 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>

这是我的 jQuery 您可以修改，上面我给了您的表单一个 ID 并在下面的 jQuery 中使用它来找到它。我还更改了按钮 type="button" 并将其移动到 <form>...</form> 标签内...

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

Answer 3

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

试试这个

Answer 4

我稍微修改了你的代码:

$('.modalAddToBagButton').on('click', function(e) {
            e.preventDefault();
            var x = document.getElementsByClassName("size-value");
            var i = x.length;
            var selected = false;
            while(i--) {
                if (x[i].hasAttribute("selected")) {
                    selected = true;
                }
            }
            console.log('selected: ',x[0].innerText);
            if(selected == false) {
                $("#errormessage").show();
            } else {
              $( "#dialog-addToBag").submit();
            }           
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
   <ul>
     <li>
      <ul>
       <li class="size-value">1</li>
       <li class="size-value" selected>2</li>
       <li class="size-value">3</li>
       <li class="size-value">4</li>
     </ul>
    </li>
  </ul>
</form>
<div class="mt10">
   <input type="submit" class="modalAddToBagButton">
</div>

看看这是否有帮助。

表单不会提交并给出错误信息

Form will not submit and gives error message

javascript

forms

jquery

if-statement

jquery-events