jQueryでフォーム改善：入力カウントの感知

前回と前々回に紹介しました入力のカウントですが、
今回はフォームで最後の段階、submitした際の動作を設定します。

HTMLソース

<form>
<textarea type="text" id="input-up"></textarea><strong>30文字まで入力できます</strong><span id="countUp">0</span>
<input type="text" id="input-down" maxlength="6" /><strong>6文字入力してください</strong><span id="countDown">6</span>
<input type="submit" value="送信" />
</form>

HTMLソースの解説

strong要素に入力の注意事項を記載します。ここの内容をJavascriptで入力エリアに内包させます。
それ以外のソースは前回と前々回に紹介した
投稿を確認して下さい。
また、このままのソースだと、インライン要素なので、全てが横並びになります。
見た目はCSSで調整して下さい。

Javascriptソース

$(document).ready(function(){
	//入力エリアのフォーカス設定
	$("#input-up").val($("#input-up + strong").text()).css("color","#CCC").one("focus",function(){
		$(this).val("").css("color","#000");
	}).blur(function(){
		if($(this).val()==""){
			$(this).val($("+ strong",this).text()).css("color","#CCC").one("focus",function(){
				$(this).val("").css("color","#000");
			});
		}
	});

	$("#input-down").val($("#input-down + strong").text()).css("color","#CCC").one("focus",function(){
		$(this).val("").css("color","#000");
	}).blur(function(){
		if($(this).val()==""){
			$(this).val($("+ strong",this).text()).css("color","#CCC").one("focus",function(){
				$(this).val("").css("color","#000");
			});
		}
	});

	$("textarea + strong,input[id='input-down'] + strong").css("display","none");


	//textarea要素の入力数をカウントアップ
	$("#input-up").keyup(function(){
		var counter = $(this).val().length;
		$("#countUp").text(counter);
		if(counter == 0){
			$("#countUp").text("0");
		}
	});

	//input要素のid="input-down"属性の入力数をカウントダウン
	$("#input-down").keyup(function(){
		var maxChars = $(this).attr("maxlength")
		var counter = $(this).val().length;
		$("#countDown").text(maxChars - counter);
		if(counter == maxChars){
			$("#countDown").text("0");
		}
	});


	//submitした際の動作設定
    $("form").submit(function(){
		var countUp = $("#input-up").val().length;
        if(countUp > 30){
			$("#input-up").css("border","solid #FF0000 1px");
            return false;
        } else {
			$("#input-up").css("border","solid #CCC 1px");
		}
		
		var countMax = $("#input-down").attr("maxlength")
		var countDown = $("#input-down").val().length;
        if(!(countDown == countMax)){
			$("#input-down").css("border","solid #FF0000 1px");
            return false;
        } else {
			$("#input-up").css("border","solid #CCC 1px");
		}
    })	;	
});

Javascriptソースの解説

上から見ていきます。
「入力エリアのフォーカス設定」は、strong要素で書かれた文字列を
入力エリアに内包する設定を記載しています。
.val()で「#input-upに隣接するstrong要素の文字列」を取得して、value属性に出力します。
.css()で文字色を変更しています。
focusで入力エリアが選択された時に内包された文字列を消去しています。
またoneで指定しているのは、focusを1度だけ実行するようにしないと、
非選択になった際に、入力した内容が消去されるからです。
次に非選択状態を表すblurにif文を記載することで、ユーザーが入力すれば
内包した文字列を消し、何も入力されていなければ、再度内包した文字列を表示させます。

文字数のカウントアップとダウンは前回と前々回を参照して下さい。

「submitした際の動作設定」がこの投稿のメインです。
まず変数countUpへ#input-upに入力された文字数を出力します。
それをif文の条件式に当てはめます。「if(countUp > 30)」で
「もし#input-upに入力された文字数が30を超えたら」となります。
もし条件がtrueなら文字数がオーバーしてますので「return false」によって
submitボタンを押しても、情報は送信されません。
そして.css()でボーダーカラーを赤にしてますので、入力エリアの枠線色が変わります。
また、条件がfalseの場合、つまり文字数が30を超えていない場合は送信されてもよいので
「return false」を記述しません。.css()でボーダーカラーを指定しているのは、
枠線が赤になった後(true)に、入力内容が30を超えていない場合(false)に
枠線色を元に戻す必要があるからです。

「#input-down」の場合も内容は基本的に同じですが、if文が少し違います。
「if(!(countDown == countMax))」は「入力された文字数と設定している上限文字数が同じ以外の場合」を意味します。
ですので、今回であれば6文字にならなければ「return false」が働き、情報を送信することが出来なくなります。

サンプル

今回はかなりJavascriptソースが長くなりましたが、基本的なことを学んでいれば簡単かと思います。
このソースを改変して、よりよいフォームを作成してみて下さい。
サンプルはこちら。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryでフォーム改善：入力カウントの感知