-1

Trying to style the error output on jquery.validate and I am not getting any success using Pseudo-elements in the css. Anyone ever have any success styling an error box with an arrow on the top with jquery.validate? Can get the box with the with arrow on top using normal CSS but not with jquery.validate?.

Used http://cssarrowplease.com/ to get the CSS (code below). Thanks

<style type="text/css">
label.error {
    float: none;
    color: red;
    padding: .8em;
    vertical-align:middle;
    font-size:12px;
    display: inline;
    font-style:normal;
    border: solid 1px #ccc;
    border-radius: 4px;
    background: #f8f8f8;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
label.error:after, label.error:before {
    bottom: 100%;
    left: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

label.error:after {
    border-color: rgba(248, 248, 248, 0);
    border-bottom-color: #f8f8f8;
    border-width: 8px;
    margin-left: -8px;
}
label.error:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #ccc;
    border-width: 9px;
    margin-left: -9px;
}
</style>
Sparky
  • 98,165
  • 25
  • 199
  • 285
user1324471
  • 21
  • 1
  • 4
  • This question has nearly nothing to do with jQuery Validate and everything to do with CSS styling of a `label` element. Retagging. It would also help everyone if you could show the rendered DOM markup of the `label` element. In other words, you have to do a much better job constructing your example code. – Sparky Feb 20 '14 at 22:10
  • **Quote OP**: _"Used [http://cssarrowplease.com/](http://cssarrowplease.com/) to get the CSS (code below)"_ ~ then why are the CSS rules in your OP **not** the same as provided at that link? – Sparky Feb 22 '14 at 19:12
  • Since, by your own admission, you're not an expert in CSS, why reinvent the wheel? You can easily combine jQuery Validate with the Tooltipster plugin where all the difficult CSS tooltips are provided for you. See this [question/answer](http://stackoverflow.com/questions/14741688/how-to-display-messages-from-jquery-validate-plugin-inside-of-tooltipster-toolti) and this [demo](http://jsfiddle.net/2DUX2/3/). – Sparky Feb 22 '14 at 19:15

1 Answers1

0

The reason your code is failing is because your trying to apply it to a <label> element.

The code you've linked to is applying the sample CSS to a <div> element, which is nothing like a <label>.

Use the errorElement option to force the jQuery Validate plugin to use <div> elements instead of label.

$('#myform').validate({
    // your other options, rules, and callbacks
    errorElement: 'div'
});

Don't forget to change label.error into div.error in all of your CSS rules.

You're going to need the specificity of div.error because the plugin also applies the error class to the input elements.

EDIT:

Since, by your own admission, you're "not an expert in CSS", why reinvent the wheel? You can easily combine jQuery Validate with a tooltip plugin, like Tooltipster, where all the difficult CSS tooltips are provided for you. See this question/answer and this demo.

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • I am using the standard CSS for error formatting that I found in several places. http://validity.thatscaptaintoyou.com/Demos/#AdaptingCSS – user1324471 Feb 21 '14 at 13:43
  • @user1324471, Based on your OP, you're using the [jQuery Validate plugin](http://jqueryvalidate.com), which has absolutely nothing to do with [the Validity plugin](http://validity.thatscaptaintoyou.com/). Also, until you realize the differences between a ` – Sparky Feb 21 '14 at 16:02
  • plenty of opinions regarding my lack of knowledge without any solutions. I have been using jquery validate for several years and have always relied on the standard label element in css to style the error output. As I am not an expert in jquery or CSS I do know one thing to be true, it has worked for me on numerous production sites. I was simply trying to get a bubble with an arrow to display the error. – user1324471 Feb 22 '14 at 17:28
  • @user1324471, Perhaps you just want me to do all the work for you? I don't know how many times/ways I can explain it. You cannot take CSS meant for a `div` and simply attach it to a `label`. The CSS you've shown in your OP is also not the same as provided in [the example you've linked to](http://cssarrowplease.com/). – Sparky Feb 22 '14 at 19:07
  • **Quote @user1324471:** _"...it has worked for me on numerous production sites"_ ~ then why are you here asking for help? I've explained where you're going wrong and how to get around it, but you simply reject it without even trying. (I've since edited my answer with an alternative solution that doesn't require you to write any CSS.) – Sparky Feb 22 '14 at 19:19