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>
自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。
詳しい方教えてください。
お礼
すみません、 ＞そもそも文字に直して数字に戻すのは無駄が多いので256を掛けて足せばいいでしょう これについても掘り下げて教えていただけないでしょうか。
補足
ありがとうございます。 shift_jisに含まれないものは置換フォールバックをし、NGにしました。 ＞文字コードを10進数で書いてわかりづらくないですか? これなのですが、16進数のままチェックできるものでしょうか？ ご教授いただければ幸いです。