jquery validate plugin. Change the error styles

Question

I have an existing form which has fields pretty close together. I want to get the error messages in a little popup instead of the regular lable beside the field.

To be more precise, this is the style i want for my error message.

Any clues on how to find the styles applied to the error message and how to change them?

Thanks in advance.

Answer 1

What you want to achieve is slightly more complex than simply changing the error class or message styles.

You must focus your efforts on the errorPlacement and success callback functions. See documentation: jqueryvalidation.org/validate

Optionally, you can install another plugin that will create these tooltips for you. I use Tooltipster, but how you integrate the tooltip plugin depends on what methods are made available by its developer.

---

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

Working Demo: http://jsfiddle.net/kyK4G/

---

Source: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Answer 2

It mostly comes down to CSS. Wrap each field into a container that is relatively positioned like so:

<div class="fieldContainer">
    <label for="phone">Phone Number:</label>
    <input type="text" name="phone" />
</div>
<div class="fieldContainer">
    <label for="phone2">Phone Number:</label>
    <input type="text" name="phone2" />
</div>

.fieldContainer {
    position: relative;
    margin-bottom: 20px;
}

Then you can absolutely position your error label and apply whatever other styles you like.

label.error {
    position: absolute;
    right: 143px;
    top: -25px;
    border: solid 1px #000;
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .7);
    padding: 2px 5px;
}

Here is an example: http://jsfiddle.net/wrxsti85/yD3c3/

Hope this helps!!!

Edit: Those fields are set to digits only, so to trigger the error just put text into the fields.

Answer 3

Can probably start with this answer jQuery form validation - CSS of error label

The jquery validation reference docs say

Error messages are handled via label elements with an additional class (option errorClass).

This means if you follow the info in the previous answer you can have the error added in a div with class errorClass.

Then just style those appropriately using css.

As an asside, you should become familiar with the browser development tools for chrome and/or firefox. These can help you find the objects and styles for elements on the page as well as help you debug your javascript.