Javascriptリアルタイムエラーチェック

締切済

質問者：noname#144507
質問日時：2011/11/14 12:58
回答数：1件

Javascript初心者です。

本を見ながらフォームの入力値のリアルタイムエラーチェックを実装しています。
テキストフィールドへの入力値の妥当性検証はできるのですが、
チェックボックスが一つもチェックされていなかった場合にチェックボックスを囲むfieldsetを赤くさせるのがうまくいきません。

電話番号の形式指定ならば

String.prototype.isZip = function(){
return this.isEmpty()||/^\d{3}-\d{4}$/.test(this);
}
という形です。thisはname属性を参照します。
すべての項目にエラーがない場合に確認画面へ進めるようにしています。

String.prototype.isNotEmpty = function() {
return this != '';
}
String.prototype.isEmpty = function(){
return this == '';
}

String.prototype.isShorterThan = function(n){
return this.length<=n;
}
String.prototype.isLongerThan = function(n){
return this.length >= n;
}
String.prototype.isZip = function(){
return this.isEmpty()||/^\d{3}-\d{4}$/.test(this);
}
String.prototype.isPhone = function() {
return this.isEmpty()||/^\d{2,4}-\d{1,4}-\d{4}$/.
test(this);
}
String.prototype.isEmail = function() {
return this.isEmpty()||/^([\w-]+\.?)+@[\w-]+(\.([\w-]+))+$/.test(this);
}
var formValidation = function(name, feedback, fields){
var form = document.forms[name];
for (var i=0; i<form.elements.length; i++){

(function(){
var elm = form.elements[i];
var f = fields[elm.name];
if (f){
f.element = elm;
f.process = function(){
var ok = true;
if (f.convert) f.element.value = f.convert(f.element.value);
if (f.validation) ok = f.validation(f.element.value);
if (f.feedback) f.feedback(ok, f.element);
return ok;
}
elm.onblur = function(e){ f.process() }
}
})();
}
form.onsubmit = function(){
var all_ok = true;
for (key in fields)
if (fields[key] && !fields[key].process())
all_ok = false;
return feedback(all_ok);
};
}
</script>
<script type="text/javascript">



<form name="MAINFORM" action="check.php" method="post">
<input name="last_name" type="text">
<input name="furigana" type="text" />

～～～～～～

<fieldset id="checkboxDemo" name="job">
<legend><img src="images/label_kozanaiyou.gif" width="92" height="18"></legend>
<label for="checkbox-1" tabindex="1">オフィス(Word,Excel)</label>
<input type="checkbox" name="kouza[]" id="checkbox-1" value="オフィス(Word,Excel)" />
<label for="checkbox-2" tabindex="2">ネットワーク構築</label>
<input type="checkbox" name="kouza[]" id="checkbox-2" value="ネットワーク構築" />
<label for="checkbox-3" tabindex="3">WEBデザイン</label><input type="checkbox" name="kouza[]" id="checkbox-3" value="WEBデザイン" />
<label for="checkbox-4" tabindex="4">WEBプログラミング</label>
<input type="checkbox" name="kouza[]" id="checkbox-4" value="WEBプログラミング" />
　</fieldset>
自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。

詳しい方教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2011/11/15 22:48

ご提示のままのものでは動作しないので、よくわかりませんが…

convertとvalidationの引数が単独のvalueになってしまっているので、そのまま利用できそうもないのと、fieldにはblurイベントがないようなので、無理やりご提示のスタイルに合せてみるとこんな感じでしょうか？

とりあえず、feedbackでまとめて処理しています。（fieldの枠線の色は変わるはず）
よくわかってないので、何かの参考にでもなれば…

'kouza[]':{
feedback: function(ok, elm){
var i, e, c = elm.parentNode.childNodes;
ok = false;
for(i=0; e=c[i++];)
if(e.nodeName=="INPUT" && e.type=="checkbox" && e.checked) ok = true;
elm.parentNode.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px #f57272';}
}

　*　チェックボックスの数だけ同じ処理が走るので、非効率的（submit時）
　*　blurのタイミングで、評価するのでタイミング的に違和感がある。
　　　（チェックボックスの場合はチェックのタイミングで処理した方がわかりやすい）
　*　validationの関数を作成していないので、okの値は返されません