textareaにエラーメッセージを追加する方法について考えているものです。
各項目の入力チェック後、
エラーが発生した項目のエラー内容を、
textareaに表示（エラーメッセージの追加）を行う場合、
現状の追加方法のままでも特に問題ないでしょうか？
考えとしては、
textarea のオブジェクトを、各項目の入力チェック関数の引数として渡して、
各入力チェックより、エラーメッセージが発生した場合、メッセージを追加してあげる、といった内容で考えています。
（※ソースをコメントに添付しております。）
私自身、javaScriptは余り触った事がない状態でして、現状としては“ひとまず動作する”といった形なのです。
記述として可笑しな点などがありましたらアドバイスいただけませんでしょうか？
No.1
5960
633
26pt
よくできているスクリプトだと思います。
ThinkThink さんは、他の関数型言語に素養のある方とお見受けいたしました。
そこで、ご質問の主旨から外れるかもしれませんが、ユーザー・フレンドリーという観点から、エラーメッセージを textarea ではなく、入力フィールドの近くに表示させてはいかがでしょう。
たとえば、確認用パスワードが一致していなかったら、以下のようにスクリプトの一部を変更することで、入力フィールドの隣にエラーメッセージを表示させることができます。⇒（参考）innerHTML
70
69
●文字列一致チェック（メイン関数の一部）
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>
No.2
1504493
27pt
趣味でしか触ったことがなくて恐縮ですが。
strName = strName.replace(/^\s+|\s+$/g,"");
をして前後のスペースを削除したほうがいいと思います。
replaceの中の正規表現
https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/G...
No.3
22023
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について
以上、参考になりましたら幸いです。
3
1
1
1
2
1
コメント（2件)
<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;
}
}
お返事方ができずに申し訳ありませんでした。
なんだか最近バタバタとしておりまして（汗）
ご照会いただきました方法について、
また試していってみたいと思っています、どうもありがとうございます。