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

我正在使用Jquery验证和一个Tag-it插件，该插件为每个要添加的新标记动态生成UL LIs。如果没有标签，插件只有一个LI，它是空的。如果您创建了至少一个标记，那么插件将创建第二个LI。我使用submitHandler和invalidHandler仅在有超过1个LI时进行验证，这意味着至少有一个标记。这很有效。这是我的小提琴：

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

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

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

当表单由于未输入任何标记而无法验证时，它会向控制台写入“您没有任何标记”。它还显示一条消息，“添加一些标记，puhleeease！”我希望它将错误样式添加到ul class=“tagit ui widget ui widget content ui corner all”的背景和边框中。我尝试使用jquery验证的highlight和addrules函数，但没有成功

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

如果该字段未能验证（没有标记，将显示“Addsometags，puhleeease！”消息），然后我放入一个标记（这意味着该字段现在已验证），它将仅注册验证，并在再次单击submit时删除错误消息。在其他字段中，插件本身会动态验证并调整样式。因此，在这种情况下，只要我添加了标记，我就希望字段能够成功验证并删除错误样式和消息，而不是等到我重新提交它。我见过许多这样的例子，但也没有实施

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

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>

---

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

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

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

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

  invalidHandler: function(event, validator) {

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


  }

---

在

上的工作示例谢谢@SteveB！这是非常有帮助和工作。关于第一个问题有什么想法吗？@ian我很快就能帮你解决这个问题，在接下来的几分钟里离开我的电脑，但我会尽快重新登录。@ian我已经更新了答案来回答你的第一个问题。这可能不是一个完美的解决方案，所以请随时向我提供反馈。Tx@SteveB，这会正确突出显示，但在LI上。我们可以在UL（class=“tagit”？上执行此操作吗？请查看此示例，并告诉我这是否更像您想要的。如果是，我将更新答案：

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