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

質問

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">

<!-- <![CDATA[
window.onload = function(){
var fields = {
'last_name':{
convert: function(val){ return val.cnvKana('asKV').trim() },
validation: function(val){ return val.isNotEmpty() && val.isShorterThan(16) },
feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; }
},
'furigana':{
convert: function(val){ return val.cnvKana('sKVC').trim() },
validation: function(val){ return val.isNotEmpty() && val.isComposedOf(cs.kata.zen+cs.space.han) && val.isShorterThan(32) },
feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; }
},
'phone':{
convert: function(val){ return val.cnvPhone() },
validation: function(val){ return val.isNotEmpty() && val.isPhone() },
feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';}
}
'email':{
convert: function(val){ return val.trim() },
validation: function(val){ return val.isNotEmpty() && val.isEmail() },
feedback: function(ok, elm){
elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';},
},
};
var feedback = function(ok){
if (ok) alert("確認画面へ進みます。");
else alert("フォームの内容に不備があるようです。再度の確認をお願いいたします。")
return ok;
};
new formValidation('MAINFORM', feedback, fields);
}
// ]]> -->

<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>
自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。

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

回答No.1

fujillin

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

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の値は返されません