QA@IT

jqueryをつかって、テキストボックスの横にアニメーションを使った、入力エラー情報を出したい

3115 PV

お世話になります。

jqueryを使って
シルバーライトのように、テキストボックスの横にエラーがあった場合に、バリデーションエラーを出したいのですが、
テキストボックスの横にうまく出てくれません。

① [テキストボックス] [エラーです]

テキストボックスに入力エラーがあった場合は、上記のように、エラーを出したいのですが、
jqueryの処理で、

spanを置き換えると(replaceWithを使用する)レイアウトがおかしくなってしまいます。。

②[エラーです] [テキストボックス] ← レイアウトが崩れて、表示位置もおかしくなってしまいます。

レイアウトが崩れず①のように表示するにはどのようにしたらよろしいのでしょうか?

  • 回答に追記しました。 -

回答

どのように書き換えているかわかりませんが(Chromeで簡単に試してみたところうまくいきました)
、提示のソースのようにspanタグがすでにあるのなら、.text("内容")で、テキストを変更するだけでもいいような気はしました。

以下サンプルです。
http://jsfiddle.net/69HP5/2/

前半が元々の状態にreplaceWithで書き換えるコードを付けています。
後半はtextを使っています。

右下のプレビューペインで動作が確認できると思います。
Chromeでしか確認していないのでもしうまく動かない場合は環境も教えてください。


jsのソースだけこちらにも置いておきます

.replaceWith()でやる場合

$("#check").click( function(){
    $("#yyy").replaceWith("<span id=\"yyy\">エラーです</span>");
    // 元の記述に準拠するなら次の行のようになりますが、上記のように引用符で括ることを推奨します。
    // $("#yyy").replaceWith("<span id=yyy>エラーです</span>");
});

.text()メソッドでやる場合

$("#check").click( function(){
    $("#yyy").text("Errorです");
});

追記

ちょっとこの質問文からこのコードが出てくるとは思いませんでした(floatは少し疑ってはいましたが)
なにか参考にしたコードがあったなら最初に示しておいてほしかったです。

とりあえず以下、更新しました。
http://jsfiddle.net/mc65N/2/


元のコード

コメントにて示してくれたサンプルを元に解説していきます。

http://jsfiddle.net/mc65N/1/

<div id="main">
    <input class="txt" type="text" name="text" size="5" maxlength="5" value="aa" id="inp"/><span class="iferror" style=" color:white; background:red; opacity:0; float:left; vertical-align:bottom;  border-radius: 2px; box-shadow: 1px 1px 5px #aaa; width:100px; display:inline; padding-left:10px;">Error</span>
</div>
$('input.txt').click(function () {
    $('span.iferror').animate({ 'marginLeft': '-10px',opacity:'0' } , 0)
                     .animate({ 'marginLeft': '0px', opacity: '1' }, 150)
    return false;
});

まず、このスクリプトの意味は調べられましたか?
2つの animateが何を意味しているのか、どういう指示をしているスクリプトなのかは調べるなどしてつかんでください。

また、表示したときに、テキストも動いてしまうようで、それもなくしたいです

この問題は 2つの animateをつかって marginLeftに対して変化をつけているために起こっています。
私の更新では '-10px' の方も '0px' にして解決しました。
しかし同じ値ならそもそも不要という考え方ができますね、その修正はご自分で検討してみてください。

左に出てしまいます。

これは spanのstyleに float:left を指定しているために起こっています。
これを削除します。
この指定がどういうものかは調べてみてください。

要素が縮まる ( 新たな問題 )

float:left を削除すると、エラーのボックスが小さくなってしまいますね(IEだとならなかったかもしれません)。
これはspanタグがレイアウト方法の分類の中の inline要素というものに分類されるために発生します。
これについてはいくつか手段がありますが、スタイルを利用して inline-block要素に変更しました。
余談ですが、divなどはblock要素といいます。「block iniline」で検索すれば詳しく説明されているページも出てくると思いますのでそれ以上は説明しません。
具体的に display:inline;display:inline-block; に変更しました。

高さがテキストボックスと合わない ( 個人的に気になりました )

先ほど示したバージョン 2では直ってませんが、これはspanのスタイルに vertical-align: bottom; が指定されているために起こっていますのでコメントアウトしました。

スタイルはなるべくcssファイルに

今回はサンプルとして提示するためにこうなっただけかもしれませんが、スタイルはできるだけ
style属性に書かずに、cssファイルに書きましょう。

もろもろ直したのが以下になります。

http://jsfiddle.net/mc65N/5/

今回指摘した部分は調べてみて是非自分のものにしてください。
わからなければ聞いてくれればわかる範囲でこたえられると思います。

編集 履歴 (6)
  • 遅くなりました。
    flied_onionさん
    レスありがとうございます。

    確かにtextとかですと普通に変わるのですが。
    http://jsfiddle.net/mc65N/1/
    を見ていただくとわかるかと思いますが、バリデートを右側に出したいのですが、左に出てしまいます。。

    また、表示したときに、テキストも動いてしまうようで、それもなくしたいです。。

    -
  • 回答に追記します。 -

以下のページの図のように、テキストボックスの横に、テキストボックスの入力内容に応じてエラーメッセージを表示したいのでしょうか?

Validator の Display="Dynamic" 時の注意点
http://surferonwww.info/BlogEngine/post/2014/01/16/validator-issue-when-setting-display-dynamic.aspx

上記は ASP.NET の検証コントロール RequiredFieldValidator の例で、jQuery ではなく普通の JavaScript を使っていますが、これがどのようにレイアウトを崩さずに表示・非表示を切り替えているかが参考になると思います。

上記のページにも書いてありますが、エラーメッセージは html コードでは span 要素となり、JavaScript による検証結果により表示/非表示を切り替えています。

RequiredFieldValidator には Display プロパティというものがあり、これの設定により、表示/非表示の方法が異なります。

Display プロパティが Dynamic に設定されている場合は、当該 span 要素の style 属性を "display:none;" または "display:inline;" に設定することにより表示/非常時を切り替えます。

Display プロパティが Static に設定されている場合は、style 属性を "visibility:hidden;" または "visibility:visible" に設定するので、 表示/非表示を切り替えてもページのレイアウトは変わりません。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。