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

Question

I am using Jquery validation and a Tag-it plugin that generates UL LIs on the fly for each new tag to be added. If there are no tags, the plugin has only one LI and it is empty. If you create at least one tag, then the plugin creates a second LI. I am using submitHandler and invalidHandler to validate only if there is more than 1 LI, which means there is at least one tag. This works. Here is my fiddle: http://jsfiddle.net/Z3HDh/95/

I need help with two additional things:

1. When the form fails to validate because no tags have been entered, it writes to the console - "you don't have any tags". It also displays a message, "Add some tags, puhleeeease!" I want it to add the error styling to the background and border of the ul class="tagit ui-widget ui-widget-content ui-corner-all". I have unsuccessfully tried using jquery validation's highlight and addrules functions.

2. If the field fails to validate (there is no tag, the "Add some tags, puhleeeease!" message appears), and then I put in a tag (which means the field now validates), it will only register the validation and remove the error message if I click submit again. On other fields, the plugin itself validates on the fly and adjusts the styling. So, in this case, as soon as I add the tag, I would like the field to validate successfully and remove the error styling and message, rather than waiting until I re-submit it. I have seen a number of examples of this but also have failed to implement it.

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

You need to add a delete rule when a tag is entered. The example below will remove the "Add tags please" when a tag is added (after the error was run).

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

To add CSS around the tag area, add the following code to your invalid Handler

  invalidHandler: function(event, validator) {

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


  }

});

It will add a red outline inside the tag input box. If you have multiple tag input boxes, the code may need to be updated to target a specific input.

You'll also need to add the following to your css file

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

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

Working example at http://jsfiddle.net/v0jdpkz8/8/