LiveValidation - 検証メッセージを画像に変更しますか？

Question

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

これは緑が全体のメッセージがプリントさthatsのに沿って表示されるようにダニが発生し、画像のみが11×11であるので、それが中に収まります約5または6画像。有効なメッセージを削除しようとしましたが、LiveValidation.jsファイルからデフォルトの「Thankyou」メッセージが出力されます。デフォルトのメッセージを空白に変更しようとしましたが、何も表示されません。私はまた、画像の場所をメッセージとして使用しようとしましたが、これはちょうどアクタの場所のテキストを表示させました。

テキストの代わりに画像を表示する方法を知っている人はいますか？

ここにライブラリを参照してください：http://livevalidation.com/

Answer 1

このポストを復活させて申し訳ありませんが、必要な人には答えがあります。 それは私のために働く...

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

Answer 2

この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/

Answer 3

チェックこのリンクは、それが役立つかもしれない：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.*$/} 

}）。あなたはそれが

Answer 4

無効か有効だ場合、私はプッシュする何かをbackground-repeat: no-repeatを組み合わせたいactualy画像2表示されvalidIcoとinvalidIcoを持って見ることができるように

これは検証のためのjQueryプラグインでは、jQueryのライブの検証と呼ばれますテキストの視野：

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