代码之家 › 专栏 › 技术社区 › KatherineMichelle

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

javascript-events if-statement forms jquery javascript

KatherineMichelle · 技术社区 · 6 年前

我有一张表格,里面有衣服的尺码。当用户选择大小时,他们可以提交表单。

我的问题是,无论用户是否选择了大小,他们都可以提交表单。代码要复杂得多,但下面是表单的一个分解,下面是“添加到包”按钮。

<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"> 已经上过课了 挑选出来的 (用户单击了此大小),然后将提交表单,但是如果没有 <li> 有课吗? 挑选出来的 ,窗体将引发错误消息。下面是我的函数部分,我认为我应该添加 如果/否则 声明:

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

我的问题是:我怎么写这个 如果/否则 声明?我不知道如何从我的输入按钮访问表单和列表项,因为它们在DIV之外并且是完全嵌套的,并且监听是否有任何列表项被赋予了类 挑选出来的 这样表单就可以提交,如果不发送错误消息。有人能帮忙吗?

更新:

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

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

4 回复 | 直到 6 年前

Rakesh 6 年前

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

试试这个

WKara 6 年前

怎么样

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

Morgs 6 年前

以下是我修改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();
});

Abhishek 6 年前

我修改了你的代码:

$('.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>

看看这是否有帮助。