在jquery驗證期間向非輸入元素添加樣式

Question

我正在使用Jquery驗證和Tag-it插件，該插件會為要添加的每個新標簽動態生成UL LI。 如果沒有標簽，則插件只有一個LI，並且為空。 如果您創建至少一個標簽，那么插件將創建第二個LI。 我僅使用1個以上的LI來使用SubmitHandler和invalidHandler進行驗證，這意味着至少有一個標簽。 這可行。 這是我的小提琴： http : //jsfiddle.net/Z3HDh/95/

我需要另外兩點幫助：

1. 當表單由於未輸入標簽而無法通過驗證時，它將寫入控制台-“您沒有任何標簽”。 它還顯示一條消息，“添加一些標簽，puhleeeease！” 我希望它向ul class =“ tagit ui-widget ui-widget-content ui-corner-all”的背景和邊框添加錯誤樣式。 我嘗試使用jquery驗證的Highlight和addrules函數未成功。

2. 如果該字段未能通過驗證（沒有標簽，則顯示“添加一些標簽，puhleeeease！”消息），然后我放入一個標簽（這意味着該字段現在已驗證），它將僅注冊驗證並刪除錯誤消息，如果我再次單擊提交。 在其他領域，插件本身可以即時驗證並調整樣式。 因此，在這種情況下，我一旦添加標簽，就希望該字段成功驗證並刪除錯誤樣式和消息，而不是等到我重新提交它。 我已經看到了許多這樣的示例，但是也沒有實現它。

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/上的工作示例