通常、送信ボタンが押されるとformのactionが実行されますが、formタグに「onsubmit」、もしくは外部化したJavascript内であれば「submit()」内に処理を記述することで、入力チェックを行うことができます。
今回は分かりやすくformタグに「onsubmit」を追加することで実装してみます。
- onsubmitで入力チェックを行う関数を指定
- デフォルトのactionを中止するよう「return false」を指定
ラジオボタン（input type=”radio”）に何かしらの選択がされているかを確認する方法
この何かしらの選択がされているかを確認する方法、つまり必須項目にチェックがあるか確認する方法です。ラジオボタンだけでなく、チェックボタン（input type=”checkbox”）にも応用できます。
<ul>
<li><input type=”radio” name=”test” value=”1″ id=”test1″ /><label for=”test1″>test1</label></li>
<li><input type=”radio” name=”test” value=”2″ id=”test2″ /><label for=”test2″>test2</label></li>
<li><input type=”radio” name=”test” value=”3″ id=”test3″ /><label for=”test3″>test3</label></li>
<li><input type=”radio” name=”test” value=”4″ id=”test4″ /><label for=”test4″>test4</label></li>
<li><input type=”radio” name=”test” value=”5″ id=”test5″ /><label for=”test5″>test5</label></li>
</ul>
<p><input type=”submit” value=”チェック” /></p>
</form>
ラジオボタンに何かしらの選択がされているかを確認するポイントは、ラジオボタンを一つずつ「true」か「false」をチェックし、そのすべてをチェックした後で、選択されていないかどうかを判断する必要がある、ということです。
これを踏まえてJavascriptを確認します。
「ラジオボタン.checked」と指定すると、チェックされていれば「true」をチェックしていない場合は「false」を返します。
これを利用してひとつずつラジオボタンを確認して、そのすべてが「false」だとアラートを出すという仕組みにしたいわけです。
ただ、この発想だと「1個目のラジオボタンがfalseなら」とif文を書いて、さらにその中で「2個目のラジオボタンがfalseなら」とさらにif文を書いて・・・とすべてチェックしなければなりません。
もちろん、一つのif文で「「1個目のラジオボタンがfalse かつ 2個目のラジオボタンがfalseなら かつ ・・・」と書いても同様です。
このやり方だと、ラジオボタンが追加・変更する度に入力チェックのJavascriptを修正する必要があり、メンテナンス性に優れていません。
というわけで、別の発想を考えます。
あらかじめ何かしらのフラグを立て、ラジオボタンをひとつずつ確認し、「ture」が返ってきたらそのフラグを変更するようにします。
つまり、あらかじめ設定したフラグに変更がなければすべてがfalseが返ってきたことになるようにするわけです。
- フラグを立てる。
- ラジオボタンを一つずつチェック。
- 「true」が返ってきたらフラグを変更する。
- チェックが終わったら、フラグが変更されていないか確認。
- フラグが変更されていれば、何かしらのラジオボタンにチェックされているということで問題なし。フラグが変更されていない場合、どのラジオボタンにもチェックされていないことになるので、アラートを表示し、この関数の処理を中止します。
- 何かしらのラジオボタンにチェックがある場合はformのactionを実行します。
var radios = elem.test;
var radiosFlag = new Boolean(false);
for(var i=0; i<radios.length; i++){
if(radios[i].checked == true){radiosFlag = true;}
}
if(radiosFlag == false){
alert(“ラジオボタンのチェックがありません”);
return false;
}
FormTest.submit();
}
チェックボックスに何もチェックがない場合、代わりに何かしらの値を入れる方法
フォームを受け取る側で属性があるかチェックして属性があればその値を取得する、なければなしって処理をすればよい話なのですが、フォームを受け取る側で属性があるかのチェックを行えない場合、フォームを送る側で調整する必要があります。そこで、この処理をJavascriptを使って実装してみます。
サンプルhtmlです。
<ul>
<li><input type=”checkbox” name=”test” value=”1″ id=”test1″ /><label for=”test1″>test1</label></li>
<li><input type=”checkbox” name=”test” value=”2″ id=”test2″ /><label for=”test2″>test2</label></li>
<li><input type=”checkbox” name=”test” value=”3″ id=”test3″ /><label for=”test3″>test3</label></li>
<li><input type=”checkbox” name=”test” value=”4″ id=”test4″ /><label for=”test4″>test4</label></li>
<li><input type=”checkbox” name=”test” value=”5″ id=”test5″ /><label for=”test5″>test5</label></li>
</ul>
<p><input type=”submit” value=”チェック” /></p>
</form>
まずは条件を「チェックボックスに何もチェックがない場合」と「何かしらの値を入れる」と２つに分けて考えます。
「チェックボックスに何もチェックがない場合」というのは先に説明したとおりですので説明は省きます。
次に「何かしらの値を入れる」。
ブラウザ上には表示されずに「何かしらの値を入れる」にはinputタグのtype属性の値を「hidden」にすることで実現できます。
<input type=”hidden” name=”test” value=”チェックなし” />
<ul>
<li><input type=”checkbox” name=”test” value=”1″ id=”test1″ /><label for=”test1″>test1</label></li>
<li><input type=”checkbox” name=”test” value=”2″ id=”test2″ /><label for=”test2″>test2</label></li>
<li><input type=”checkbox” name=”test” value=”3″ id=”test3″ /><label for=”test3″>test3</label></li>
<li><input type=”checkbox” name=”test” value=”4″ id=”test4″ /><label for=”test4″>test4</label></li>
<li><input type=”checkbox” name=”test” value=”5″ id=”test5″ /><label for=”test5″>test5</label></li>
</ul>
<p><input type=”submit” value=”チェック” /></p>
</form>
これで最低限の実装は可能となりました。つまり、チェックボックスがあろうがなかろうが「何かしらの値を入れ」てフォームを実行することが可能となったわけです。
あとはJavascriptを使って、「チェックボックスに何もチェックがない場合」にのみ「hidden」を送るようにします。
- 「input」タグ、かつtypeが「hidden」、かつhiddenの値が「チェックなし」である場合、そのinputタグを削除します
- チェックボックスにチェックがあるか確認します
- どれにもチェックがなければ、「input」タグ、かつtypeが「hidden」、かつhiddenの値が「チェックなし」、かつnameが「test」であるタグを作ります
- formを実行します
<script type=”text/javascript”>
function check(FormTest){
var inputs = FormTest.elements;
for(var i=0; i<inputs.length; i++){
if(inputs[i].type == “hidden” && inputs[i].value == “チェックなし”){
FormTest.removeChild(inputs[i]);
}
}
var checkboxs = FormTest.test;
var checkboxsFlag = new Boolean(false);
for(var i=0; i<checkboxs.length; i++){
if(checkboxs[i].checked == true){checkboxsFlag = true;}
}
if(checkboxsFlag == false){
var newCheckboxs = document.createElement(“input”);
newCheckboxs.setAttribute(“type”,”hidden”);
newCheckboxs.setAttribute(“name”,”test”);
newCheckboxs.setAttribute(“value”,”チェックなし”);
FormTest.appendChild(newCheckboxs);
}
FormTest.submit();
}
</script>