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语句，如果给<li class="size-value">赋予了类selected（用户单击了此大小），则表单将被提交，但是如果NO <li>的类为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

怎么样

<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

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

这是我修改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 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>

看看是否有帮助。

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

4 个答案: