Animate the error messages for jQuery Validate

Question

Using a smooth animation for the jQuery Validation plugin's error messages is fairly easy to do when the message first appears. However, after the initial errorPlacement callback is executed, I don't know how to keep animating the message as the user keeps changing the input.

In this example, I am expanding and fading the error messages if/when they first appear. After that, I want to continue to fade the error messages in and out depending on whether or not they are valid. However, only the default functionality, where the messages quickly appear/disappear (which isn't very visually appealing) is working for me.

tl;dr:

I want the error messages to always fade in and out rather than blinking.

JSFiddle example

HTML

<form id="contactForm" class="form-horizontal" autocomplete="off">
  <fieldset>
    <h4 style="margin-bottom: 20px; margin-top: 20px;" class="text-center">Contact us today for a free thing</h4>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-user bigicon" aria-hidden="true" title="Name"></i></span>
      <div class="col-xs-9">
        <input type="text" name="Name" placeholder="Name" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-envelope-o bigicon" title="Email address"></i></span>
      <div class="col-xs-9">
        <input type="text" name="Email" placeholder="Email address" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-phone-square bigicon" title="Phone number"></i></span>
      <div class="col-xs-9">
        <input type="text" placeholder="Phone number (eg. 123-456-7890)" class="form-control hps-text-box">
      </div>
    </div>

    <div class="form-group">
      <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-pencil-square-o bigicon" title="Enter your message for us here."></i></span>
      <div class="col-xs-9">
        <textarea name="UserMessage" rows="7" placeholder="Enter your message for us here. We will get back to you within 2 business days." class="form-control hps-text-box"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-12 text-center">
        <button id="submitButton" type="submit" class="btn btn-primary" autocomplete="off">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

JavaScript

$(document).ready(function() {
  $("#contactForm").validate({
    rules: {
      Name: "required",
      Email: {
        required: true,
        email: true
      },
      UserMessage: "required",
      Phone: {
        phoneUS: true
      }
    },
    messages: {
      Name: "Please provide your name",
      Email: "Please enter a valid email address",
      UserMessage: "Please enter a message"
    },
    errorElement: "div",
    errorClass: "jqval-error",
    errorPlacement: function(error, element) {
      error.insertAfter(element);
      error.slideDown(400);
      error.animate({ opacity: 1 }, { queue: false, duration: 700 });
    },
    submitHandler: function(form) {
      alert("Form submitted");
    }
  })
});

CSS

input,
select,
textarea {
  max-width: none;
}

.hps-text-box {
  margin-left: 10px;
}

.bigicon {
  font-size: 34px !important;
}

div.jqval-error {
  display: none;
  opacity: 0;
  margin-left: 18px;
  color: #f39200;
  font-weight: bold;
}

This is not a trivial request... you'll have to spend a considerable amount of time studying the docs and playing with the various callback functions such as `errorPlacement`, `success`, `highlight` and `unhighlight`. Also see this answer for similar behavior using Tooltipster plugin: http://stackoverflow.com/a/14741689/594235 — Sparky, Sep 21 '16 at 05:40
It might also help you to know that once the plugin dynamically creates the various error message elements, they stay in the DOM and are subsequently toggled and/or hidden. — Sparky, Sep 21 '16 at 05:41
@Sparky thanks for the link. From what I can tell, however, with the default settings, the message elements are not hidden/shown programatically after their initial creation. Rather, I've observed that the element stays in place, but the text within the element becomes blank. This default functionality is part of what's going to make it very difficult for me. — Jacob Stamm, Sep 21 '16 at 12:22
*"I've observed that the element stays in place, but the text within the element becomes blank."* ~ That's just not true. Look at [this jsFiddle](https://jsfiddle.net/jy46tr3n/) and you will clearly see that the `label` element gets `display: none` after the rules are satisfied. I filled them with red so you can quickly see they are truly hidden and not just empty. Otherwise, examine the DOM and verify for yourself: https://jsfiddle.net/jy46tr3n/ — Sparky, Sep 21 '16 at 14:11
Regardless, as I stated in my first comment, this is not a trivial request. The validation message is toggled by the plugin before you can gain control to manipulate it. There are no callbacks or hooks that allow you to do something after successful validation but also before the message is removed. Basically, you'll need to recreate some of the functionality & methods of Tooltipster, where you save the message text someplace, handle it yourself so that it can't be hidden, then fade it out. — Sparky, Sep 21 '16 at 14:39
@Sparky Ah yes, I see, I was mistaken. It deletes the text *and* sets it to `display: none` while keeping the element in place. This will definitely be tricky. Perhaps I'll try modifying the source code and creating callback functions that can replace the default functionality. — Jacob Stamm, Sep 21 '16 at 15:51

score 1 · Answer 1 · edited May 23 '17 at 10:27

This is not a trivial request. you'll have to spend a considerable amount of time studying the docs and playing with the various callback functions such as errorPlacement, success, etc. Also see this answer for similar behavior using Tooltipster plugin: stackoverflow.com/a/14741689/594235

The validation messages are set to display: none by the plugin before you can gain control to manipulate them. There are no plugin options, callbacks, methods, or hooks that allow you to do something after successful validation but also before the message is removed and label hidden.

Basically, you'll need to recreate some of the functionality & methods of Tooltipster, where you extract and save the text of the message someplace and handle it yourself completely upon error & success.

EDIT:

The showErrors callback will give you an error map and error list where you'll have access to the text of each error and its corresponding input element. Note: simply by using this callback, the default error messages will also be suppressed (good for your purposes). Still some effort, but perhaps this is easier than reinventing the wheel.

Animate the error messages for jQuery Validate

tl;dr:

HTML

JavaScript

CSS

1 Answers1