Question

我正在使用Jquery验证和Tag-it插件，它可以为要添加的每个新标记动态生成UL LI。如果没有标签，则插件只有一个LI，它是空的。如果您创建至少一个标记，则插件会创建第二个LI。我正在使用submitHandler和invalidHandler来验证是否存在多于1个LI，这意味着至少有一个标记。这有效。这是我的小提琴：http://jsfiddle.net/Z3HDh/95/

我需要另外两件事的帮助：

当表单因未输入任何标签而无法验证时，它会写入控制台 - ＆＃34;您没有任何标签＆＃34;。它还会显示一条消息，＆＃34;添加一些标签，puhleeeease！＆＃34;我希望它将错误样式添加到ul class =＆＃34; tagit ui-widget ui-widget-content ui-corner-all＆＃34;的背景和边框。我没有成功尝试使用jquery验证的高亮和添加规则功能。
如果字段无法验证（没有标记，＆＃34;添加一些标记，puhleeeease！＆＃34;消息出现），然后我输入一个标记（这意味着现在的字段验证），它只会注册验证并删除错误消息，如果我再次单击提交。在其他字段中，插件本身会在运行时进行验证并调整样式。因此，在这种情况下，只要我添加标记，我希望该字段成功验证并删除错误样式和消息，而不是等到我重新提交它。我已经看到了很多这方面的例子，但也未能实现它。

HTML：

            <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</button>
                </p>
            </div><!-- end form-group-buttons -->
        </form>

JS：

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


$("#add_idea_form").validate({
  ignore: "input[name='tags']:hidden",

  submitHandler: function (form) {
  },

  invalidHandler: function(event, validator) {
     if($('#id_material + ul').length < 2){
        console.log("You don't have any tags");
           //    return false;
     }

  }
});

$("li.email > input").rules("add", {
   required: true,
   email: true
});

CSS：

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

Answer 1

输入标记时需要添加删除规则。添加标记时（运行错误后），下面的示例将删除“添加标记”。

$("#id_material").tagit({
    afterTagAdded: function(event, ui) {
        $("#id_material-error").remove();
        $(".ui-corner-all").removeClass('error');
        console.log(ui.tag);
        }
});

要在标记区域周围添加CSS，请将以下代码添加到无效的处理程序

  invalidHandler: function(event, validator) {

     if($('#id_material + ul').length < 2){
        console.log("You don't have any tags");
        $('.ui-corner-all').addClass('error'); 
     }


  }

}）;

它会在标签输入框内添加红色轮廓。如果您有多个标记输入框，则可能需要更新代码以定位特定输入。

您还需要将以下内容添加到您的css文件

.error{
border:2px solid #d17877;
background: #F2DEDE;
box-shadow: none;
}

.ui-corner-all.error{
background:red;
}

http://jsfiddle.net/v0jdpkz8/8/

的工作示例

在jquery验证期间向非输入元素添加样式

1 个答案: