jQuery override default validation error message display (Css) Popup/Tooltip like

Question

I'm trying to over ride the default error message label with a div instead of a label. I have looked at this post as well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples:

Example #1 (Dojo) - Must type invalid input to see error display
Example #2

Here is some example code that overrides the error label to a div element

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Now I'm at a loss on the css part but here it is:

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

UPDATE:

Okay I'm using this code now but the image and the placement on the popup is larger than the border, can this be adjusted to be dynamic is height?

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
   element = element.parent();

   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2));
}

the css is the same as below (your css code)

Html

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>

Answer 1

If you could provide some reason as to why you need to replace the label with a div, that would certainly help...

Also, could you paste a sample that'd be helpful ( http://dpaste.com/ or http://pastebin.com/)

Answer 2

I use jQuery BeautyTips to achieve the little bubble effect you are talking about. I don't use the Validation plugin so I can't really help much there, but it is very easy to style and show the BeautyTips. You should look into it. It's not as simple as just CSS rules, I'm afraid, as you need to use the canvas element and include an extra javascript file for IE to play nice with it.

Answer 3

A few things:

First, I don't think you really need a validation error for a radio fieldset because you could just have one of the fields checked by default. Most people would rather correct something then provide something. For instance:

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50

is more likely to be changed to the right answer as the person DOESN'T want it to go to the default. If they see it blank, they are more likely to think "none of your business" and skip it.

Second, I was able to get the effect I think you are wanting without any positioning properties. You just add padding-right to the form (or the div of the form, whatever) to provide enough room for your error and make sure your error will fit in that area. Then, you have a pre-set up css class called "error" and you set it as having a negative margin-top roughly the height of your input field and a margin-left about the distance from the left to where your padding-right should start. I tried this out, it's not great, but it works with three properties and requires no floats or absolutes:

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>

Answer 4

Unfortunately I can't comment with my newbie reputation, but I have a solution for the issue of the screen going blank, or at least this is what worked for me. Instead of setting the wrapper class inside of the errorPlacement function, set it immediately when you're setting the wrapper type.

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"message\"",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertBefore(element);
        //error.addClass('message');  // add a class to the wrapper
        error.css('position', 'absolute');
        error.css('left', offset.left + element.outerWidth() + 5);
        error.css('top', offset.top - 3);
    }

});

I'm assuming doing it this way allows the validator to know which div elements to remove, instead of all of them. Worked for me but I'm not entirely sure why, so if someone could elaborate that might help others out a ton.

Answer 5

That answer really helped me, in my case i had to filter some elements out and have special aligment on their error div,

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}

Answer 6

Going back to the errorplacement solution by Nadia

I have tried it and it works like a charm in Safari and Firefox but causes IE08 to bypass the jqueryvalidator and go straight to the server side validator.

My code is this - as soon as I insert 'error element.... it is unstable in IE08. All help much appreciated

<script type="text/javascript"> 
    $(document).ready(function() { 
          $("#sampleform").validate({ 
            rules: { 
                    dinername: "required",
                    venue: "required",
                    contact: "required",
                    dinertelephone: "required",
                    venuetime: "required",
                    numberdiners: "required", 
                    dineremail: { required: true, email: true}, 
                    datepicker: { required: true,date: true}
                  }, 

          messages: { 
                    dinername: "Your name?",
                    numberdiners: "How many guests?",
                    dinertelephone: "Your mobile?",
                    venue: "Which restaurant?",
                    venuetime: "Your arrival time?",
                    datepicker: "Your booking date?",
                    dineremail: "Please enter a valid email address",
                    }, 

                    errorElement: "div",
                    wrapper: "div",  // a wrapper around the error message
                    errorPlacement: function(error, element) {
                            element.before(error);
                            offset = element.offset();
                            error.css('right', offset.right);
                            error.css('right', offset.right - element.outerHeight());
                                                             }


                });
    });

      </script> 

 <script type="text/javascript">
    $(function() {
        $("#datepicker") .datepicker({minDate: 0, maxDate: '+6M +0D',dateFormat: 'DD, d M yy',onClose: function() {$(this).valid();}

        });

    });
    </script>

The relevant webpage is http://www.johnslaytor.com.au/nilgiris/forms/bookingform/bookingform.html

Answer 7

So how do i place error messages from two fields, say for example Password and confirm password in a single div?