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   lt span gt   lt input type  radio  class  checkbox  value  P  id  radio P  name  radio group name   gt   lt label for  radio P  gt P lt  label gt   lt input type  radio  class  checkbox  value  S  id  radio S  name  radio group name   gt   lt label for  radio S  gt S lt  label gt   lt  span gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Add following css to your  validate method to change the css or functionality            errorElement   div       wrapper   div       errorPlacement  function error  element            offset   element offset            error insertAfter element          error css  color   red

User · Answer

You can use the errorPlacement option to override the error message display with little css  Because css on its own will not be enough to produce the effect you need     document  ready function            myForm   validate           rules                 elem 1                     required  true                  digits  true                             elem 2                     required  true                                  errorElement   div           wrapper   div       a wrapper around the error 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                 error css  top   offset top                            You can play with the left and top css attributes to show the error message on top  left  right or bottom of the element  For example to show the error on the top       errorPlacement  function error  element            element before error           offset   element offset            error css  left   offset left           error css  top   offset top - element outerHeight             And so on  You can refer to jQuery documentation about css for more options   Here is the css I used  The result looks exactly like the one you want  With as little CSS as possible   div message      background  transparent url msg arrow gif  no-repeat scroll left center      padding-left  7px     div error      background-color  F3E6E6      border-color   924949      border-style  solid solid solid none      border-width  2px      padding  5px      And here is the background image you need     source  scriptiny com     If you want the error message to be displayed after a group of options or fields  Then group all those elements inside one container a  div  or a  fieldset   Add a special class to all of them  group  for example  And add the following to the begining of the errorPlacement function   errorPlacement  function error  element        if  element hasClass  group             element   element parent                    continue as previously explained   If you only want to handle specific cases you can use attr instead   if  element attr  type       radio        element   element parent        That should be enough for the error message to be displayed next to the parent element   You may need to change the width of the parent element to be less than 100      I ve tried your code and it is working perfectly fine for me  Here is a preview    I just made a very small adjustment to the message padding to make it fit in the line   div error       padding  2px 5px      You can change those numbers to increase decrease the padding on top bottom or left right  You can also add a height and width to the error message  If you are still having issues  try to replace the span with a div    lt div class  group  gt   lt input type  radio  class  checkbox  value  P  id  radio P  name  radio group name   gt   lt label for  radio P  gt P lt  label gt   lt input type  radio  class  checkbox  value  S  id  radio S  name  radio group name   gt   lt label for  radio S  gt S lt  label gt   lt  div gt    And then give the container a width  this is very important   div group       width  50px     or any other value        About the blank page  As I said I tried your code and it is working for me  It might be something else in your code that is causing the issue

User · Answer

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       lt style type  text css  gt       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               lt form gt      lt label for  name  gt Name  lt  label gt  lt input id  name  type  textbox    gt      lt div class  error  gt  lt  lt  lt  This field is required  lt  div gt      lt label for  numb  gt Phone  lt  label gt  lt input id  numb  type  textbox    gt      lt div class  error  gt  lt  lt  lt  This field is required  lt  div gt      lt  form gt

User · Answer

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

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

Examples related to jquery

Examples related to css

Examples related to tooltip

Examples related to custom-errors

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

Examples related to jquery

Examples related to css

Examples related to popup

Examples related to tooltip

Examples related to custom-errors