Tag-it（UL LI）字段未正确验证 [英] Tag-it (UL LI) field not validating correctly

问题描述

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

I am trying to validate my form using Jquery validation: https://jqueryvalidation.org/. Below is my code, and I have set up a jsfiddle (http://jsfiddle.net/Z3HDh/62/) to work with.

验证器在常规输入字段上正常工作，因为您可以看到是否单击了提交。但是，验证器不适用于标签字段。更准确地说，它适用于标签（隐藏）输入字段，但不适用于UL LI标签内的实际标签显示。如果您进入检查器并取消隐藏以下字段input.tagit-hidden-field，您会看到验证工作正常。

The validator works correctly on a regular input field, as you can see if you click submit. However, the validator does not work on the "tags" field. More accurately, it works on the "tags" (hidden) input field, but not on the the actual "tags" display, which is inside UL LI tags. If you go into the inspector and "unhide" the following field "input.tagit-hidden-field", you see that the validation works.

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

My question: How do I get the validation to work on the field where the "tags" actually display, inside the UL LI tags?

我在这个问题上读了一个帖子（ JQuery.Validate清除方式来检查ul是否至少有一个li项目）但是还没有能够搞清楚。

I have read one thread on this issue (JQuery.Validate clean way to check if a ul has at least one li item) but haven't been able to figure it out.

$("#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>

推荐答案

jquery.validate（）并不是为了验证ul，所以也许你应该采用另一种方法。

jquery.validate() is not meant to validate ul's, so maybe you should follow another approach.

正如您可以阅读这里（https://jqueryvalidation.org/validate/) ，您可以通过验证具有回调函数的submithandler。这在验证后执行。在那里，你可以添加自定义代码来检查ul中的li。

As you can read here (https://jqueryvalidation.org/validate/) you can pass validate a submithandler with a callback function. This gets executed after the validation. In there, you can add custom code to check for the li's in the ul.

我建议，而不是

$("#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都意味着你没有任何标签。

Upon validation, the callback function checks if the ul has less than 2 li's. You usually should have at least one at all times, namely the one, that carries the input field for the next tag. So anything that is 1 or 0 should mean you don't have any tags.

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

return false; prevents the form from being sent, but before that, you should display some message to the user.

我希望这会有所帮助。
Dai

I hope this helps. Dai

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

Oh and here your edited fiddle: http://jsfiddle.net/Z3HDh/84/

编辑：

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

Actually, from the link you provided, the solution is very similar to George Siggouroglou's. You might want to give him an upvote. Also, if you want to send the form after post-validation, use form.submit(); as stated in the docs. :-)

这篇关于Tag-it（UL LI）字段未正确验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！