2015年05月21日

ちょっと久しぶりの日記更新。
今週のFXトレードで損失を出してしまいました。
まあトータルではプラスなので
その部分では、昔よりは成長したかな。

さて今回は、HTMLのformタグで登録フォームを設置し
各入力項目の空欄状況をjavascriptでチェックして
必須項目が空欄であれば、入力を促すように警告文を出す
…といったことに現在、チャレンジしていて解決したので
自分のメモ代わりとして、記事にしたいと思います。

現在、ランサーズで受けている依頼で
ホームページから登録できるフォームを作成しているのですが
クライアント側の意向で、必須項目が空欄の場合
ページ上に警告文を出す…といった依頼を受けていました。

正直、作成した経験がありませんでした。
が、過去の経験上、これを乗り越えたら
また自分のスキルが確実にレベルアップはするので
逃げずに作成、そしてなんとか作り上げることができました。
クライアントさんには、かなり待たせてしまいましたが…

まずHTMLは以下の通りに記述します。


<form name="form1" method="post" enctype="multipart/form-data" onsubmit="return check()">
<p>
名前:<input type="text" name="text1"><br />
写真:<input type="file" name="file1"><br />
チェック:<br />
<input type="radio" name="check1" value="チェック1">チェック1<br />
<input type="radio" name="check1" value="チェック2">チェック2
</p>
<div id="no-input1">[名前]の項目が未入力です</div>
<div id="no-input2">[写真]の項目が選択されていません</div>
<div id="no-input3">[チェック]の項目がチェックされていません</div>
<p>
<input type="submit" value="送信">
</p>
</form>


未入力の項目があった場合の警告文は
予め、HTMLソースに記述しておき
cssのdisplayで「none」を指定し、非表示にしておきます。
「enctype」を設定しているのは、今回の依頼が
画像のアップも必須項目だったからです。

そして、javascriptのコードは以下の通りに記述。


<script>
function check() {
	var flag = 0;

	if( document.form1.text1.value=="" ) {
		flag = 1;
		document.getElementById('no-input1").style.display="block";
	} else {
		document.getElementById('no-input1").style.display="none";
	}

	if( document.form1.file1.value=="" ) {
		flag = 1;
		document.getElementById('no-input2").style.display="block";
	} else {
		document.getElementById('no-input2").style.display="none";
	}

	if( document.form1.check1.value=="" ) {
		flag = 1;
		document.getElementById('no-input3").style.display="block";
	} else {
		document.getElementById('no-input3").style.display="none";
	}

	if( flag == 0) {
		return true;
	} else {
		return false;
	}
}
</script>

「flag」という変数を設定し、if文で各項目が空欄かどうかをチェック。
空欄のチェックは「value==""」で指定しています。
もしvalueの値が空欄だった場合は、flagに1を代入。
そして最後のif文で、flagの値をチェックし
値が0の場合は送信、値が0ではない場合は「return false」で
submitによる送信を中止させています。
「type="file"」や「type="radio"」の場合も
「value==""」の指定でチェックできました。

ちなみに、HTMLのformのonsubmitは「check()」ではなく
「return check()」と「return」を書いていないと
「return false」としても、そのまま送信されてしまいます。

以前書いた「jQueryの条件分岐」の依頼なのですが
私はjQueryでの解決法が見つけられずに
今回のjavascriptによるプログラムで上手くいきました。
なんか、肩の荷が下りました(笑)



コメントする

名前
URL
 
  絵文字