×

JavaScript(jQuery)と正規表現で問い合わせフォームの入力チェックとエラーメッセージ表示を行う方法

2016年1月9日 コーディング

コンタクトフォーム

問い合わせフォーム設置するにあたり、各項目が正しく入力されているかどうかチェックして、入力に誤りがあった場合はエラーメッセージ表示するという動作が必要になります。

項目によって入力内容や文字数に制限を設ける場合があります。

【入力内容制限の例】

  • 住所:日本語や英数字が混在
  • フリガナ:半角カタカナ
  • 電話番号:10桁以上の半角英数字
  • メールアドレス:@(アットマーク)が入った正しい形式

入力内容や文字制限をサイト運営者側でコントロールすれば、ユーザビリティが向上し、サイト運営者にとっても情報管理がしやすくなります。

今回はJavaScript(jQuery)と正規表現で、問い合わせフォームの入力項目のチェック、エラーメッセージ表示を行う方法を紹介します。

サンプルデモで動作を確認

下記リンク先にサンプルデモとして問い合わせフォームを用意しました。実際に問い合わせフォームを使ってみて動きを確認してみましょう。

DEMO

※今回サンプルとして作成する問い合わせフォームの入力項目に関する条件を設定しています。

【項目の入力条件】

項目 入力条件
名前(必須) 25文字以内(全角・半角ともに1文字にカウントする)
フリガナ(必須) 全角カタカナで25文字以内
ユーザー名 25文字以内(全角・半角ともに1文字にカウントする)
電話番号(必須) 半角数字10桁以上(固定電話の電話番号が最低10桁)
ハイフンが入っていてもOK
メールアドレス(必須) 半角英数字255文字以内で、@(アットマーク)が一つだけ含まれる
お問い合わせ内容(必須) 500文字以内(全角・半角ともに1文字にカウントする)
htmlタグ・urlの貼り付け禁止(スパム対策)

入力チェック、エラーメッセージを表示する問い合わせフォームの作成方法

※今回はjQueryとFont AwesomeというWebアイコンフォントを利用しているので、~内に下記コードを記述しておきます。



問い合わせフォームをhtmlで組む

まずはhtmlで問い合わせフォームを組みます。
下記がHTMLのソースコードです。

【HTML】

お問い合わせフォームDEMO

必須名前
必須フリガナ
任意ユーザー名
必須メールアドレス
(半角英数字)

※記入されたメールアドレス宛に、自動返信で確認メールが届きます。確認メールが届かない場合は、メールアドレスを確認のうえ再度お問い合わせください。

必須電話番号(半角数字)
必須備考・お問い合わせ
(500文字以内)

※デモページなので実際には送信されません

<form>~</form>間に、inputタグ、textareaタグで各入力項目を記述します。

  • 名前、フリガナ、ユーザー名、メールアドレス…<input type=”text”>
  • 電話番号…<input type=”tel”>
  • 備考・お問い合わせ…<textarea maxlength=”500″></textarea>(500文字制限)
  • 送信ボタン…<input type=”submit”>

各入力欄の下に、エラーメッセージの装飾用にclass=”error_m”というクラス名のspan要素を記述します。(初期状態はエラーメッセージは無い状態です)

また、入力項目ごとにエラーメッセージの内容が異なるので、id=”name_error”、id=”furigana_error”といったユニークとなるid名を振っておきます。(※javascriptでエラーメッセージ表示の処理を行う際に使います。)

※今回は、実際にデータの送信はせずに、送信ボタンにonclick=”input_check();return false;を設定しています。input_check()は入力項目をチェックするための関数で、後程紹介するJavaScriptで作成します。

CSSで装飾する

HTMLでフォームを組んだら、次はCSSで装飾します。
下記がCSSのソースコードです。

【CSS】

#contact_form .input_item dl {
	margin: 0 0 20px 0;
    width: 820px;
}

#contact_form .input_item dl dt {
    float: left;
    width: 250px;
    font-size: 18px;
    line-height: 30px;
    height: 30px;
    padding: 3px 0 3px 0;
    text-indent: -48px;
    margin: 0 0 0 48px;
}

#contact_form .input_item dl dt span {
	font-size: 14px;
	margin: 0 10px 0 0;
	display: inline;
	line-height: 20px;
	padding: 3px 10px;
	color: #ffffff;
	height: 18px;
	border-radius: 4px;
}

#contact_form .input_item dl dt span.req {
	background: #FF1515;
}

#contact_form .input_item dl dt span.any {
	background: #cccccc;
}

#contact_form .input_item dl dd {
    float: right;
    width: 482px;
    font-size: 18px;
    line-height:30px;
    height:auto;
}

#contact_form .input_item dl dd li {
    display: inline-block;
    margin: 0 15px 0 0;
    line-height: 30px;
    height: 30px;
    padding: 3px 0;
}

#contact_form .input_item dl dd p.mail_caution {
    font-size: 12px;
    line-height: 19px;
    color: #313131;
    margin: 5px 0 0 0;
}

#contact_form .input_item dl dd input[type="text"],
#contact_form .input_item dl dd input[type="number"],
#contact_form .input_item dl dd input[type="email"],
#contact_form .input_item dl dd input[type="tel"]{
    width: 470px;
    font-size: 18px;
    height:30px;
    padding: 3px 0 3px 10px;
    margin:0;
}

#contact_form .input_item .transmission input[type="submit"] {
	border: 3px double #FFFFFF;
	background: #F4D4D4;
	font-size: 25px;
	text-shadow: none;
	color: #ffffff;
	width: 400px;
	padding: 30px 0;
	margin: 25px 0;
	display: block;
	opacity: 1.0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

#contact_form .input_item .transmission input[type="submit"]:hover {
    background: #FF1515;
	opacity:0.85;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

#contact_form .input_item dl dd input[type="text"].inp_error,
#contact_form .input_item dl dd input[type="number"].inp_error,
#contact_form .input_item dl dd input[type="tel"].inp_error,
#contact_form .input_item dl dd textarea.inp_error {
    border: 1px solid #F88A8A;
    background: #F4D4D4;
}

#contact_form .input_item dl dd textarea {
    width: 470px;
    padding: 10px 3px 10px 10px;
}

#energy_contact #send_status{
	padding: 5px 0 25px;
    text-align: center;
}

#energy_contact #send_status p{
	width: 480px;
	margin: 0 auto;
    padding: 0 15px;
    line-height: 50px;
    font-size: 25px;
    border: 1px solid #3c763d;
    border-radius: 4px;
    background-color: #dff0d8;
    color: #3c763d;
}

span.error_m {
	font-size: 15px;
	font-weight: normal;
	color: #FF4040;
	display: block;
	margin: 0;
}

HTMLには直接記述はしていませんが、エラーの時にわかりやすいように、装飾用のクラスinp_errorを用意して、入力欄の枠・背景が赤くなるようにCSSで指定します。

※下記のような感じであらかじめCSSで装飾しておきます。

#contact_form .input_item dl dd input[type="text"].inp_error,
#contact_form .input_item dl dd input[type="number"].inp_error,
#contact_form .input_item dl dd input[type="tel"].inp_error,
#contact_form .input_item dl dd textarea.inp_error {
    border: 1px solid #F88A8A;
    background: #F4D4D4;
}

エラーメッセージ表示のためのclass=”error_m”というクラス名のspan要素も装飾を忘れずに(メッセージが入力項目のすぐ下に表示されるように、本来はインライン要素であるspanをdisplay:blockで指定しています)。

span.error_m {
	font-size: 15px;
	font-weight: normal;
	color: #FF4040;
	display: block;
	margin: 0;
}

エラーメッセージ表示以外では特別な装飾は必要はないかと思います。

JavaScriptで入力内容のチェックと、エラーメッセージ表示を行う

実際に入力チェックとエラーメッセージ表示をJavaScriptを使って行います。
下記がJavaScriptのソースコードです。

【JavaScript】


まずは、各入力内容をid名とval()メソッドを使って変数に格納します。

ここでのポイントは、前提として電話番号は入力するときにハイフンが入っていてもOKにしていることです。

変数telへ入力された電話番号を格納する時に、正規表現replace()メソッドを使ってハイフンが入力されていた場合にハイフンを空に(削除)します。

replaceメソッドで色々な種類のハイフンにあたるものを空に置き換えています。

	// 入力内容セット
	var name   = $("#name").val();
	var furigana  = $("#furigana").val();
	var username = $("#username").val();
	var mailaddress  = $("#mailaddress").val();
	var tel  = $("#tel").val().replace(/[━.*‐.*―.*-.*\–.*ー.*\-]/gi,'');
	var remarks  = $("#remarks").val();

変数に値を格納できたら、次は値が正しいかどうかをチェックします。

if~else文を使って、値をチェックします。
基本的にはソースコードの流れとしては以下の通り。

入力されているか

正しい形式で入力されているか

設定した文字数以内である

入力内容に誤りがある場合は、html(value)メソッドでvaluの部分にエラーメッセージをセットして、表示させます。
※<i class=’fa fa-exclamation-circle’></i>はFont Awesomeで提供されているhtmlコードです。

エラーメッセージに加えて、addClass(class)メソッドで、指定した要素にinp_error(エラー時の装飾用クラス)を追加します。(CSSのところでも説明しています)

	if(name == ""){
		$("#name_error").html(" お名前は必須です。");
		$("#name").addClass("inp_error");
		result = false;
	}else if(name.length > 25){
		$("#name_error").html(" お名前は25文字以内で入力してください。");
		$("#name").addClass("inp_error");
		result = false;
	}

フリガナ、メールアドレス、電話番号、お問い合わせ内容に関しては、設定した形式で入力されているかを、match(正規表現)メソッドを使ってチェックします。

下記の正規表現を使って、入力内容とマッチングします。

– フリガナ –
match(/^[ァ-ロワヲンー  \r\n\t]*$/)

全角カタカナを入力された文字列の先頭から末尾までマッチングします。

– メールアドレス –
match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)

先頭は英数字、次にくる文字が英数字またはドット・アンダースコア・ハイフンいづれかが入り、@(アットマーク)が一度だけでてきて、また英数字・アンダースコア・ハイフンが1回以上繰り返しででてきて、英数字・ドット・アンダースコア・ハイフンが1回以上出てくるかどうかをマッチングします。

よく分からないかもしれませんが、example-test@sample.comというような正しいメールアドレスの形式で入力されているかをチェックするわけです。

– 電話番号 –
match(/^[0-9]+$/)

数字を入力された文字列の先頭から末尾までマッチングします。

– お問い合わせ内容 –
match(/[<(.*)>.*<\/\1>]/)…※1
match(/^[  \r\n\t]*$/)…※2

※1はHTMLタグ、URL文字列が入っていないかをマッチングしています。
※2は空白やタブのみ入力されているかをマッチングしています。

正規表現はなかなか奥が深いので、ここでは簡単な説明だけしておきました。

正規表現についてもっと詳しく知りたい方はこちら
正規表現 – JavaScript | MDN

ソースコードの順番は入れ替わってしまいましたが、removeClass(class)とempty()メソッドを使ってソースコードの初めにエラー用装飾のためのクラスとエラーメッセージをリセットする処理を行っています。送信ボタンをクリックするたびに、一度状態をリセットして改めて入力チェック、エラーメッセージ表示を行っています。

	// エラー用装飾のためのクラスリセット
	$('#name').removeClass("inp_error");
	$('#furigana').removeClass("inp_error");
	$('#username').removeClass("inp_error");
	$('#mailaddress').removeClass("inp_error");
	$('#tel').removeClass("inp_error");
	$('#remarks').removeClass("inp_error");

	// 入力エラー文をリセット
	$("#name_error").empty();
	$("#furigana_error").empty();
	$("#username_error").empty();
	$("#mailaddress_error").empty();
	$("#tel_error").empty();
	$("#remarks_error").empty();

まとめ

いかがでしたか?

一見ごちゃごちゃしてとっつきにくいかもしれませんが、html・CSSは特段難しいことはしていません。

Javascriptの記述自体はif~else文や簡単なメソッドを使うだけなのでそこまで難易度は高くないでしょう。
ただし、正規表現の部分は少し難しいかなと個人的に思います。

今回紹介したソースコードを参考に、問い合わせフォームを作ってみてください。
フォームタグ(HTML)、javascript、正規表現の知識を得るいい機会になりますよ。

関連記事