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>
This question is related to
jquery
css
popup
tooltip
custom-errors
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.
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);
}
}
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.
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>
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/)
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'); }
Source: Stackoverflow.com