Databases
StackOverflow2013
Postsdbo
POjQuery override default validation error message display (Css) Popup/Tooltip like
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery override default validation error message display (Css) Popup/Tooltip like
    text
    copied!<p>I'm trying to over ride the default error message label with a div instead of a label. I have looked at <a href="https://stackoverflow.com/questions/309574/jquery-validation-how-to-not-display-errors-or-how-to-display-errors-as-a-toolt">this post</a> 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:</p> <p><a href="http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/textbox-validating-currency-number" rel="nofollow noreferrer">Example #1 (Dojo)</a> - Must type invalid input to see error display<br /> <a href="http://www.scriptiny.com/2008/04/dynamic-inline-javascript-form-validation/" rel="nofollow noreferrer">Example #2</a></p> <p>Here is some example code that overrides the error label to a div element</p> <pre><code>$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); </code></pre> <p>Now I'm at a loss on the css part but here it is:</p> <pre><code>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; } </code></pre> <p>UPDATE:</p> <p>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?</p> <pre><code>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)); } </code></pre> <p>the css is the same as below (your css code)</p> <p>Html</p> <pre><code>&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; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload