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的任何东西都应该意味着你没有任何标签。

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

我希望这会有所帮助。戴

哦，这是你编辑过的小提琴： http://jsfiddle.net/Z3HDh/84/

编辑：

实际上，根据您提供的链接，解决方案与George Siggouroglou非常相似。你可能想给他一个upvote。另外，如果要在验证后发送表单，请使用form.submit（）;正如文档中所述。： - ）

标签（UL LI）字段未正确验证

1 个答案: