javaScriptを使用して、

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

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

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

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/06/03 02:34:28
  • 終了:2009/06/10 02:35:04

回答(3件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/06/03 10:17:34

ポイント26pt

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

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>
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922009/06/03 03:46:37

ポイント27pt

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

  • 名前の未入力チェックが""かどうかだけで判断しているとスペースでも通過してしまうのでnoInputCheck関数に渡す前に、
strName = strName.replace(/^\s+|\s+$/g,"");

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

  • セミコロンがない所が気になる。
  • textareaにエラー表示するよりもエラーの起こったinputを赤色ボーダーで囲んだり横にメッセージを添える効果があると面白いと思います。

関連

replaceの中の正規表現

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

id:kent0608 No.3

kent0608回答回数220ベストアンサー獲得回数232009/06/03 07:45:54

ポイント27pt

メンテナンスを容易にするためにスクリプト要素と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/

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

  • id:ThinkThink
    【html】
    <html>
    <head>
    <title>Noname</title>
    <script type="text/javascript" src="errCheck.js"></script>
    </head>
    <body>

    <center>

    エラーメッセージ
    <form name="form1">
    <table class="table">
    <tr>
    <td colspan="2" align="center"><textarea id ="idErrMsg" name="errMsg" rows="5" cols="30" value=""></textarea><br><br><br><br><br></td>
    </tr>
    <tr>
    <td><label id="idName">*名前<label></td>
    <td><input type="textBox" id="txtName" name="Name" value=""><br><br></td>
    </tr>
    <tr>
    <td><label id="idPassword">*パスワード</label></td>
    <td><input type="password" id ="pasPassword" name="pass1" value=""><br><br></td>
    </tr>
    <tr>
    <td><label id="idPasswordCheck">*パスワード確認用</label></td>
    <td><input type="password" id ="pasPasswordCheck" name="pass2" value=""><br><br></td>
    </tr>
    </table>
    </form>

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


    </center>

    </body>
    </html>

    【errCheck.js】
    //●入力チェック
    function errCheck(){

    //エラーメッセージ(textarea)オブジェクト確保
    var errMsg_obj = document.getElementById("idErrMsg");

    //エラーメッセージクリア
    errMsg_obj.value = '';

    //氏名チェック
    nameCheck(errMsg_obj);

    //パスワードチェック
    passwordCheck(errMsg_obj);

    }

    //●氏名チェック
    function nameCheck(errMsg_obj){

    //エラー表示内容
    var errMsg_01 = "No Data\n"
    var strName = document.getElementById("txtName").value;

    //未入力チェック呼び出し
    noInputCheck(strName, errMsg_obj, errMsg_01);

    }

    //●パスワードチェック
    function passwordCheck(errMsg_obj){

    //エラー表示内容
    var errMsg_01 = "No Data\n"
    var errMsg_02 = "password check again\n"

    var strPassword = document.getElementById("pasPassword").value;
    var strPasswordCheck = document.getElementById("pasPasswordCheck").value;

    //未入力チェック呼び出し
    noInputCheck(strPassword, errMsg_obj, errMsg_01);
    noInputCheck(strPasswordCheck, errMsg_obj, errMsg_01);

    //文字列一致チェック
    strCheck(strPassword, strPasswordCheck, errMsg_obj, errMsg_02);

    }

    //●未入力チェック
    function noInputCheck(str, errMsg_obj, errMsg_01){

    if(str == "" ){
    alert("add errMsg");
    errMsg_obj.value += errMsg_01;
    }
    }

    //●文字列一致チェック
    function strCheck(str1, str2, errMsg_obj, errMsg_02){

    if(str1 != str2){
    alert("add errMsg");
    errMsg_obj.value += errMsg_02;
    }

    }

  • id:ThinkThink
    ご回答いただき、ありがとうございます。
    お返事方ができずに申し訳ありませんでした。
    なんだか最近バタバタとしておりまして(汗)

    ご照会いただきました方法について、
    また試していってみたいと思っています、どうもありがとうございます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません