LiveValidation - Change validation message to picture?

Question

LiveValidation is JavaScript library for validating data. I'm using it to validate a form as the user inputs information. At the moment the validation message that appears is set as follows:

var username = new LiveValidation('username', { validMessage: 'Valid Username.', wait: 500});

However, I want to change it from saying "Valid Username." to simply displaying a green tick image. I have tried to do this by changing the CSS of the valid message area to the following:

.LV_valid
{
    background-image: url('green_tick.gif');
    font-size:10px;
    color:#33CC33;
}

This causes green ticks to be displayed along the entire message thats printed, and since the image is only 11x11 it fits in around 5 or 6 images. I have tried removing the valid message, but then it prints the default "Thankyou" message from the LiveValidation.js file. I tried changing the default message to be blank also, but then nothing is displayed at all. I also tried using the image location as the message but this just caused the actaul location text to be displayed.

Does anyone know how to display an image instead of text?

See the library here: http://livevalidation.com/

score 1 · Answer 1 · answered May 31 '12 at 08:51

1

This CSS should do what you want:

.LV_valid
{
    background-image: url('green_tick.gif');
    width: 0;
    height: 0;
    padding: 11px 11px 0 0;
    overflow: hidden;
}

Explanation: Those width, height, and overflow values hide all of the element's content, and the padding values add and 11x11 space in a way that doesn't allow the content to show, but does allow the background to show.

jsFiddle (using a different picture, of course): http://jsfiddle.net/uqRQp/

answered May 31 '12 at 08:51

Brilliand

13,404
6
46
58

In this situation. When this solution is implemented, no image is visible. – Richard Bell May 31 '12 at 09:15
Then I would think that your image URL is wrong. The image URL needs to be relative to the stylesheet. Is the "green_tick.gif" image in the same folder as the stylesheet? – Brilliand May 31 '12 at 09:59
The image url is correct as it displays in the background when a confirmation message is entered in the javascript. – Richard Bell May 31 '12 at 10:04
I didn't mean to delete the confirmation message. Leave the confirmation message there, and include my CSS (along with `display: inline-block;` as Daniel mentioned - he is correct that that's needed for a `span`). – Brilliand May 31 '12 at 10:07
The question Brilliand is asking is relevant - is the green_tick.gif image in *the same folder* as the the CSS file containing this rule? – Daniel Attfield May 31 '12 at 10:08
Yes got it. Thankyou both so much. My problem was not leaving the message in the javascript. I am awarding the bounty to Daniel Attfield as his answer was slightly more comprehensive and he invested time talking me through it. – Richard Bell May 31 '12 at 10:19

Daniel Attfield · Answer 2 · 2012-05-31T10:35:32.253

1

I'd combine background-repeat: no-repeat with something to push the text out of sight:

.LV_valid
{
    /* This ensures the element is displayed as a block-level element
    so that all the following CSS rules apply. */        
    display: inline-block;          

    /* This displays your image, but only once. */
    background-image: url('green_tick.gif');
    background-repeat: no-repeat;

    /* This pushes the text out of the way so it can't be seen. */
    height: 0px !important;
    height: /**/ 11px; /* IE consistency hack */
    padding-top: 11px;
    overflow: hidden;
}

edited May 31 '12 at 10:35

answered May 31 '12 at 09:02

Daniel Attfield

2,024
2
24
40

No image is visible when I implement this solution. I think this may have to be done using javascript. Thanks for your input though :0) – Richard Bell May 31 '12 at 09:21
What kind of element is the .LV_valid class applied to? It may be you'd need a few more CSS rules to get the element to co-operate. – Daniel Attfield May 31 '12 at 09:33
If it's not a block level element, you'll need to add either 'display: block;' or 'display: inline-block' depending on your layout requirements to get this fix to work - see here: http://jsfiddle.net/pRRXz/2/ – Daniel Attfield May 31 '12 at 09:41
The javascript creates a span to which the class is applied. How it does this, I don't know as I am unfamiliar with javascript. – Richard Bell May 31 '12 at 09:50
The javascript library can be found here livevalidation.com – Richard Bell May 31 '12 at 09:52
I've modified the answer to include the 'display: inline-block;' rule, so that your span (which is an inline element) is rendered as a block, so all the CSS rules can be successfully applied to it. Let me know how you get on. – Daniel Attfield May 31 '12 at 09:54
Tried it without success. Still no image visible. – Richard Bell May 31 '12 at 10:01

score 0 · Answer 3 · answered May 31 '12 at 09:01

0

check this link it may help : http://andreaslagerkvist.com/jquery/live-validation/#jquery-plugin-example-code

jQuery('#jquery-live-validation-example').liveValidation({
validIco:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-valid.png', 
invalidIco: WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-invalid.png', 
required:    ['name', 'email', 'foo'], 
fields:        {foo: /^\S.*$/}

});

this is a jquery plugin for validation called jQuery Live Validation as you can see it has validIco and invalidIco who are actualy the image 2 display if it's invalid or valid

answered May 31 '12 at 09:01

Bassem Assem Alameddine

19
7

Short version: Instead of using `validMessage`, use `validIco`. This does seem like the proper way to handle this specific problem. – Brilliand May 31 '12 at 09:11
Thanks for your input, however this solution seems to be unrelated to the Livevalidation plugin that I am currently using. Please see the link http://livevalidation.com/ – Richard Bell May 31 '12 at 09:25
yes i know it's a different plugin i thought maybe you could use it instead of the one you already using – Bassem Assem Alameddine May 31 '12 at 09:27
I appreciate the suggestion but the features provided by the library I am currently using are quite extensive and fit my requirements really well. I would ideally like to find a solution specifically for this. – Richard Bell May 31 '12 at 09:35

score 0 · Accepted Answer · answered Jun 25 '13 at 18:13

Sorry for reviving this post.. but there is the answer for those who need it. It work for me...

.LV_valid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('right.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

.LV_invalid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('wrong.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

LiveValidation - Change validation message to picture?

4 Answers4