LiveValidation - Изменить сообщение проверки на изображение? - PullRequest
Новая
       4

LiveValidation - Изменить сообщение проверки на изображение?

1 голос
/ 23 марта 2012

LiveValidation - это библиотека JavaScript для проверки данных. Я использую его для проверки формы, когда пользователь вводит информацию. На данный момент появившееся сообщение проверки установлено следующим образом: 

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

Однако я хочу изменить его, сказав «Действительное имя пользователя». просто отображая зеленую галочку. Я попытался сделать это, изменив CSS допустимой области сообщения на следующее: 

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

Это приводит к тому, что зеленые галочки отображаются вдоль всего напечатанного сообщения, а поскольку изображение имеет размер только 11x11, оно умещается примерно в 5 или 6 изображений. Я попытался удалить действительное сообщение, но затем оно печатает сообщение по умолчанию «Спасибо» из файла LiveValidation.js. Я попытался изменить сообщение по умолчанию, чтобы оно также было пустым, но тогда ничего не отображалось. Я также попытался использовать местоположение изображения в качестве сообщения, но это просто вызвало отображение текста местоположения.

Кто-нибудь знает, как отобразить изображение вместо текста?

Смотрите библиотеку здесь: http://livevalidation.com/

Ответы [ 4 ]

1 голос
/ 31 мая 2012

Я бы объединил background-repeat: no-repeat с чем-то, что вытолкнет текст из поля зрения: 

.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;
}
1 голос
/ 31 мая 2012

Этот CSS должен делать то, что вы хотите: 

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

Объяснение: Эти значения ширины, высоты и переполнения скрывают все содержимое элемента, а значения отступов добавляют и пробел 11x11 так,не разрешать показ содержимого, но позволяет отображать фон.

jsFiddle (конечно, используя другое изображение): http://jsfiddle.net/uqRQp/

0 голосов
/ 25 июня 2013

Извините за оживление этого поста .. но есть ответ для тех, кому это нужно. Это работает для меня ... 

.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;
}
0 голосов
/ 31 мая 2012

проверьте эту ссылку, это может помочь: 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.*$/}

});

это плагин jquery для проверки, называемый jQuery Live Validation, поскольку вы можете видеть, что у него есть validIco и invalidIco, которые фактически отображают изображение 2, если оно недействительно или действительно

...