5

Jquery Validation プラグインのエラー メッセージのスタイルを設定していますが、問題が発生しています。

プラグインのコードを編集して、メッセージの言語を変更しました。これは JavaScript で実行できることはわかっていますが、「ハードコード」する方がよいようです。ただし、これは実際の例では見られません。

これがライブの例です。どういうわけかエラーメッセージの前にa を挿入する必要があり<span></span>ますが、方法がわかりません。何か案は？

明確にするために: プラグインがクラス「エラー」の要素を表示する代わりに、次のように表示する必要があります。

<span class='pointer'></span><label class='error'>This is the error</label>

4

4 に答える 4

15

私はあなたの最良の選択はエラー要素のラッパーといくつかのCSSスタイルになると思います：

$('#myform').validate({
    errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
    },
    wrapper: 'span'
});

これにより、次のようなエラーが発生します。

<span class='arrow'>
    <label class='error'>Error</label>
</span>

そしていくつかのCSSであなたはそれを成し遂げます。

span.arrow {
    margin-left: 6px;
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat left center;
}
label.error {
    height:17px;
    border-top:1px solid #99182c;
    border-right:1px solid #99182c;
    border-bottom:1px solid #99182c;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
}

ライブデモ

于 2013-02-16T19:26:01.123 に答える
4

errorElementプロパティを使用して、エラーコンテナを指定できます。error-containerのクラスを指定する場合でも、errorClassを使用して指定できます。

ここでjquery検証ドキュメントを参照してください

例えば ​​：

$(".selector").validate({
    errorElement: "em"
});

エラー要素を「em」に設定します。

于 2013-02-16T18:49:27.387 に答える
1

解決策が見つかりました。ここにあります：

HTML :

<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js'></script>Desired error:
<br />
<input type='text' name='username' class='error' />
<span class='arrow'></span>
<label class='error'>Error</label>
<br />
<br />
<br />
<form action='' method='post' id='myform'>
    <input type='text' name='username' required />
    <br />
    <input type='email' name='email' required />
    <br />
    <input type='submit' value='submit' />
</form>

CSS :

input {
    padding:5px;
}
input.error {
    border:1px solid #99182c;
}
span.arrow {
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat center left;
    top:4px;
}
label.error {
    border-top:1px solid #99182c;
    border-bottom:1px solid #99182c;
    border-right:1px solid #99182c;    
    color:black;
    padding:1px 5px 1px 5px;
    font-size:small;

}

JavaScript :

$('#myform').validate({
    wrapper: 'span',
    errorPlacement: function (error, element) {
        error.css({'padding-left':'10px','margin-right':'20px','padding-bottom':'2px'});
        error.addClass("arrow")
        error.insertAfter(element);
    }
});
于 2013-02-16T21:20:42.210 に答える