人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javaScriptを使用して、
textareaにエラーメッセージを追加する方法について考えているものです。

各項目の入力チェック後、
エラーが発生した項目のエラー内容を、
textareaに表示(エラーメッセージの追加)を行う場合、
現状の追加方法のままでも特に問題ないでしょうか?

考えとしては、
textarea のオブジェクトを、各項目の入力チェック関数の引数として渡して、
各入力チェックより、エラーメッセージが発生した場合、メッセージを追加してあげる、といった内容で考えています。

(※ソースをコメントに添付しております。)

私自身、javaScriptは余り触った事がない状態でして、現状としては“ひとまず動作する”といった形なのです。
記述として可笑しな点などがありましたらアドバイスいただけませんでしょうか?


●質問者: ThinkThink
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript アドバイス エラー エラーメッセージ オブジェクト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●26ポイント

よくできているスクリプトだと思います。

ThinkThink さんは、他の関数型言語に素養のある方とお見受けいたしました。


そこで、ご質問の主旨から外れるかもしれませんが、ユーザー・フレンドリーという観点から、エラーメッセージを textarea ではなく、入力フィールドの近くに表示させてはいかがでしょう。


たとえば、確認用パスワードが一致していなかったら、以下のようにスクリプトの一部を変更することで、入力フィールドの隣にエラーメッセージを表示させることができます。⇒(参考)innerHTML


●文字列一致チェック(メイン関数の一部)
 strCheck(strPassword, strPasswordCheck, document.getElementById("pasPasswordCheck_errMsg"), "※確認用パスワードが一致しません");


●文字列一致チェック関数
function strCheck(str1, str2, errMsg_obj, errMsg) {
 if (str1 != str2) {
// alert("add errMsg");
 errMsg_obj.innerHTML = errMsg;
 }
}

●HTML部分
<td><input type="password" id ="pasPasswordCheck" name="pass2" value="">
<div id="pasPasswordCheck_errMsg"></div>
</td>

2 ● Cherenkov
●27ポイント

趣味でしか触ったことがなくて恐縮ですが。

strName = strName.replace(/^\s+|\s+$/g,"");

をして前後のスペースを削除したほうがいいと思います。

関連

replaceの中の正規表現

https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/G...


3 ● kent0608
●27ポイント

メンテナンスを容易にするためにスクリプト要素とHTML要素は完全に分離したほうがいいでしょう。

<input type="button" onclick="errCheck()" value="送信">

このような表記は避けるべきです。

これを例えるならば、HTMLとCSSが混在して書かれているような状況です。

<div style="width:500px;height:300px;........" > </div>

簡単な処理だけで記述量が少ないうちは良いのですが、さまざまな要素がイベントのトリガーとなり、それぞれに

onclickを書いていくと可読性が損なわれてしまいます。スクリプトの処理を追う際にもHTMLを見ていかなければならず面倒です。

現在はjQueryという非常に優れたjavascriptライブラリがあり、それを用いることで優れた操作性や見た目の機能を、可読性を損なわずに簡単に追加することができます。

実装例

http://moto-mono.net/2008/08/22/realtimeformvalidation.html

jQueryについて

http://semooh.jp/jquery/

以上、参考になりましたら幸いです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ