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>
自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。
詳しい方教えてください。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ご提示のままのものでは動作しないので、よくわかりませんが…
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の値は返されません
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
jQuery 同じ処理を関数にまとめ...
-
ページ内に複数表がある場合のT...
-
HTML5でファイルドラッグ&ドロ...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
アクセス時からのカウントダウ...
-
二次元配列を使って順位をだす...
-
pdfに丸秘などのスタンプを...
-
bt_melter.jsをサイトの一部の...
-
javaScriptのコードの修正をお...
-
ASP+アクセスでのSQLコメントに...
-
JavaScript window.openで開く...
-
C#OpenCv V4にのエラーに関する...
-
gas スプレッドシートがアクテ...
-
MFCのキャプション変更
-
船のゲームを作っているのです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
要素名がスペースを含む場合のj...
-
function(e)の意味を教えてくだ...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
関数名をテキストから読み込む...
-
jqueryuiのdialog
-
addEventListener()でリスナー...
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
drawImageの描画順序の指定につ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
おすすめ情報