Adding styling to non-input elements during jquery validation

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:

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

ian · Accepted Answer · 2018-04-16 19:54:23Z

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/

edited Apr 16, 2018 at 19:54

ian

3133 silver badges16 bronze badges

answered Apr 16, 2018 at 13:41

SteveB

9247 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ian Over a year ago

Thanks @SteveB! That is very helpful and works. Any ideas on the first question?

SteveB Over a year ago

@ian I should be able to help you with that shortly, stepped away from my computer for the next few minutes but I'll log back in as soon as I can.

SteveB Over a year ago

@ian I've updated the answer to answer your first question. It may not be a perfect solution so feel free to provide me with feedback.

ian Over a year ago

Tx @SteveB, That does the correct highlighting, but on the LI. Can we do it on the UL (class="tagit"?

SteveB Over a year ago

Check out this example and tell me if that's more like what you wanted. If it is, I'll update the answer: jsfiddle.net/L4smx92d/11

|

Collectives™ on Stack Overflow

Adding styling to non-input elements during jquery validation

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related