CODEWITHSUNDEEP
jqueryhtmlanimationjquery-validate
Jacob Stamm
Jacob Stamm

Reputation: 1863

Animate the error messages for jQuery Validate

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

Upvotes: 1

Views: 2575

Answers (1)

Sparky
Sparky

Reputation: 98738

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.

Upvotes: 1

Related Questions