javascript - Tag-it (UL LI) 字段未正确验证

Question

我正在尝试使用 Jquery 验证来验证我的表单:https://jqueryvalidation.org/ .下面是我的代码，我已经设置了一个 jsfiddle ( http://jsfiddle.net/Z3HDh/62/) 来使用。

验证器在常规输入字段上正常工作，如您单击提交时所看到的那样。但是，验证器不适用于“标签”字段。更准确地说，它适用于“标签”(隐藏)输入字段，但不适用于 UL LI 标签内的实际“标签”显示。如果您进入检查器并“取消隐藏”以下字段“input.tagit-hidden-field”，您会看到验证有效。

我的问题:如何在 UL LI 标签内实际显示“标签”的字段上进行验证？

我已经阅读了一个关于这个问题的帖子 ( JQuery.Validate clean way to check if a ul has at least one li item )，但一直没弄明白。

$("#id_material").tagit();

$("#add_idea_form").validate();

input.error,
td.field input.error,
td.field select.error,
tr.errorRow td.field input,
tr.errorRow td.field select {
  /*background-color: #ffffd5;*/
  border: 2px solid #d17877;
  background: #F2DEDE;
  box-shadow: none;
}

#add_idea_form label.error {
  color: red;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://aehlke.github.io/tag-it/js/tag-it.js"></script>
<link rel="stylesheet" type="text/css" href="https://aehlke.github.io/tag-it/css/jquery.tagit.css">
<link rel="stylesheet" type="text/css" href="https://aehlke.github.io/tag-it/css/tagit.ui-zendesk.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>



<form method="post" id="add_idea_form" action="" class="main-form main-form-small addItemForm">

  <div class="form-group">
    <label for="id_title">Add your title here (required)</label>
    <input type="text" id="id_title" name="title" maxlength="75" value="" required data-msg="Please add a title.">
  </div>
  <!-- end form-group -->


  <div class="form-group">
    <label for="id_material">Your tags go here... (required)</label>
    <input type="text" id="id_material" name="material" value="" required data-msg="Add some tags, puhleeeease!">
  </div>

  <div class="form-group-buttons">
    <p class="form_buttons">
      <a href="<?php echo $this->cancel_link . $this->item_type; ?>s" class="dgrey-button cancel-button">Cancel</a>
      <button type="submit">Submit<img id="bigpic" /></button>
    </p>
  </div>
  <!-- end form-group-buttons -->

</form>

Answer 1

jquery.validate() 并不意味着验证 ul，所以也许您应该采用另一种方法。

如您所见here (https://jqueryvalidation.org/validate/)您可以通过回调函数验证提交处理程序。这将在验证后执行。在那里，您可以添加自定义代码来检查 ul 中的 li。

我建议，而不是

$("#add_idea_form").validate();

你应该使用:

$("#add_idea_form").validate({
    submitHandler: function (form) {
        if($('#add_idea_form ul li').length < 2){
            console.log("No li's in the ul");
            //Display some message to the user here
            return false;
        }
    }
});

验证后，回调函数会检查 ul 是否少于 2 li。您通常应该始终至少有一个，即携带下一个标签的输入字段的那个。所以任何 1 或 0 都应该意味着你没有任何标签。

返回错误；阻止发送表单，但在此之前，您应该向用户显示一些消息。

希望对您有所帮助。傣族

哦，这里是你编辑的 fiddle : http://jsfiddle.net/Z3HDh/84/

编辑:

实际上，从您提供的链接来看，解决方案与 George Siggouroglou 的解决方案非常相似。你可能想给他投票。此外，如果您想在验证后发送表单，请使用 form.submit();如文档中所述。 :-)