时间戳

首页 > 解决方案 > 表单不会提交并给出错误信息

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

问题描述

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

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

<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（用户点击了这个大小），那么表单将被提交，但是如果没有<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();
  }
});

标签： javascriptjqueryformsif-statementjquery-events

解决方案

怎么样

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

推荐阅读