Search code examples
javascriptcsslivevalidation

LiveValidation - Change validation message to picture?

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/

Solution

  • 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;
}