フォームの入力欄に入力された文字数によって分岐処理するjQuery

更新日：2017年2月10日

フォームの入力欄に入力された文字数が8文字であれば形式的に合っている、逆に8文字でなければ形式的に確実に間違っている場合があるとします。

例をあげるのであれば下記のようなパターンでしょうか。
20170210
これは本日の投稿日時である2017年2月10日を意味しますが、これが8文字以外の文字数になることは形式的に間違っていると言えますよね。

つまりフォームの入力欄に入力された文字数が8文字であればOKだと表示し、8文字でなければそれは間違っているということをユーザーに伝える必要がありますね。

それでは早速実装していきましょう。
HTMLには

	
本日の日付を入力して下さい。
	

例：2017年2月10日の場合、「20170210」と入力。
	

と記述します。
これはあくまで例ですので、内容は何でもいいのですが、
重要なのはformタグにonsubmit="return chk(this)"を記述することと、フォームの入力欄に任意の名前をつけることです。
この例ではdateという名前をつけています。
また、maxlength="8"で入力出来る文字数の上限を8文字に制御しています。

仕上げにjQueryには下記のように記述します。

function chk() {
	var date_wordcount = $('input[name="date"]').val().length;
	if(date_wordcount != 8) {
		alert("受注日の形式が不正です。");
		return false;
	}else{
		alert("OKです！");
	}
}

もしもdateというnameの入力欄の文字数が8文字じゃなかったら「受注日の形式が不正です。」とアラートを出して、送信をさせません。
逆に8文字だった場合、「OKです！」とアラートを出して送信させます。

これにてもう実装完了です。
ちなみに実装すると下記のように出力されます。
無事送信することが出来れはこのページの上部に飛ばされます。