制作の久保田です。
今回はEFOフォームの実装に欠かせない、フォームの入力値チェックのコードをまとめました。
入力値のチェックは難しそうですが、実際には「正規表現」でパターンマッチに該当するかのチェックをすることで判定できるため、チェックコードを差し替えることで応用が効きます。
大枠だけ理解してしまえば、条件を変えて使い回しのできるコードとなるため、今回掲載するコード以外にも必要な条件を当てはめて独自のチェックを作成することができるかと思います。
目次
はじめに
エラーチェックの重要性
まずは、フォームのエラーチェックの重要性、必要性について解説します。
エラーチェックを行うことは、ユーザー、管理者双方にメリットがあり、以下のような項目があげられます。
- ユーザビリティの向上
適切なエラーメッセージを表示することで、ユーザーが問題を理解しやすくなり、入力ミスを減らすことができます。 - 能動的な入力
ユーザーは進捗や問題点が視覚的に表示されることで、タスクを覚えやすくなり、 完了させる意欲が高まります - データの信頼性
入力値のエラーチェックにより、不正なデータや無効なデータを防ぐことができます。不正なデータは、セキュリティ上の脆弱性を引き起こす可能性があります。
注意事項
ここで記載するコードは、動作を保証するものではありません。あくまで自己責任で使用をお願いします。
コードを使用した際の問題について、弊社では一切の責任を負いかねますのでご了承ください。
エラーメッセージの表示方法
必須項目の設定とエラーメッセージ
まずは、必須項目の設定とエラーメッセージの表示方法を見ていきます。
html のベースコード
htmlのベースコードは各チェック項目で共通です。
<!DOCTYPE html>
<html>
<head>
<title>メールチェック</title>
</head>
<body>
<h1>メールチェック</h1>
<form>
<h2>氏名</h2>
<div class="input-cont">
<input class="name" type="text" name="氏名" class="req">
<div class="err"></div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>
</html>
inputタグの後ろに<div class=”err”></div>を配置し、前のインプット要素に問題があった場合に、errの中にエラーメッセージを表示します。
入力項目を必須にしたい場合は、inputタグにreq というクラス名をつけます。
フォームの要素と、エラー表示用のdivを<div class=”input-cont”>…</div>で括ります。
今回はjqueryのコードを見ていくため、jqueryも読み込んでおきます。
jquery のベースコード
jqueryでは、functionを定義し、フォームの入力項目からフォーカスが外れた時、値が変更された時に実行します。
<script>
jQuery( function($) {
function text_check( tgt ) {
var val = tgt.val();
// ここにチェック処理
}
// text_check を実行
$( 'form' ).find( 'input, select, textarea' ).on( 'change blur', function() {
text_check( $( this ) );
});
});
</script>
上記では、text_check() という関数を定義し、input、select、textareaの値が変更、またはフォーカスが外れたタイミングで実行しています。
// ここにでチェックの処理、の部分に実際のチェック処理を記述していきます。
必須項目のテキスト、セレクト、テキストエリアに値があるかをチェック
まずは単純に、必須項目に入力値が入っているかをチェックします。
<script>
jQuery( function($) {
function text_check( tgt ) {
var val = tgt.val();
if( val ) {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// text_check を実行
$( 'form' ).find( 'input, select, textarea' ).on( 'change blur', function() {
text_check( $( this ) );
});
});
</script>
text_check( $( this ) ); で変更された項目を引数として text_check() を実行します。
tgt.val() で対象の値を取得し、値があるかないかで処理を分岐します。
値がある場合は、親要素である input-cont に okのクラスを付与、前述した<div class=”err”></div>のエラーメッセージ用のdivを非表示にします。
値がない場合は、input-cont の okのクラスを削除、name = tgt.attr( ‘name’ ); で、対象のname属性を取得し、エラーメッセージを設定して err を表示しています。
必須項目のラジオボタン、チェックボックスに値があるかチェック
ラジオボタン、チェックボックスはインプットと値の取得方法が異なります。
チェックボックスは最低1つのチェックが入っているかの判定を行います。
<script>
jQuery(function($) {
function list_check(tgt) {
var name = tgt.attr('name');
var flag = $('[name="' + name + '"]:checked').length;
if (flag) {
tgt.closest('.input-cont').addClass('ok');
tgt.closest('.input-cont').children('.err').text('').css('display', 'none');
} else {
tgt.closest('.input-cont').removeClass('ok');
tgt.closest('.input-cont').children('.err').text(name + 'を選択してください。').css('display', 'block');
}
}
// list_check を実行
$('input[type="radio"], input[type="checkbox"]').on('change blur', function() {
list_check($(this));
});
});
</script>
var flag = $(‘[name=”‘ + name + ‘”]:checked’).length; の部分で checked が入っている要素を取得しています。
要素が見つかればokのクラスをつけて、errのメッセージを非表示に、見つからなければ ok を削除して err のメッセージを表示します。
email が問題ないかチェック
ここからは、入力値が正しいかのチェックを行なっていきます。
メールの入力フォームで、メールアドレスとし妥当かどうかをチェックし、問題がある場合はエラーメッセージを出します。
<script>
jQuery( function($) {
// emailチェック
function email_check( tgt ) {
var val = tgt.val();
if( val ) {
var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if ( !emailRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( 'メールアドレスが正しくありません。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// email_check を実行
$( 'input[type=email]' ).on( 'change blur', function() {
email_check( $( this ) );
});
});
</script>
値があるかどうかのチェックは、先のコードと同じです。
値があった場合に、値として正しいかのチェックを行うコードが追加されています。
エラーチェックの部分は「正規表現」を使用して判定します。
これ以降の入力値の妥当性チェックのコードは、この「正規表現」の内容が違うだけです。
ここでは「正規表現」の詳細は割愛しますが、メールの場合は、「/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;」になっている箇所です。
この値を test() 関数で評価し、問題がない場合は先ほどと同じように、okクラスを付与し、errを非表示にします。
問題があった場合は、okを削除し、errにメッセージを表示します。
電話番号 が問題ないかチェック
続いて電話番号のチェックです。
これも前述のメールチェックと内容はほぼ同じで、電話番号として正しい値かを「正規表現」でチェックします。
<script>
jQuery( function($) {
// telチェック
function tel_check( tgt ) {
var val = tgt.val();
if( val ) {
var telRegex = /^\d{10,11}$/;
if ( !telRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '電話番号が正しくありません。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// tel_check を実行
$( 'input[type=tel]' ).on( 'change blur', function() {
tel_check( $( this ) );
});
});
</script>
ここでは、var phoneRegex = /^\d{10,11}$/; の部分で、10桁または11桁の数字かどうかをチェックしています。
評価する「正規表現」とエラー時のメッセージテキスト以外の内容はメールと同じです。
郵便番号 が問題ないかチェック
こちらも同様に、「正規表現」と「エラーメッセージ」の変更で実装します。
<script>
jQuery( function($) {
// zipチェック
function zip_check( tgt ) {
var val = tgt.val();
if( val ) {
var zipRegex = /^\d{3}-\d{4}$/;
if ( !zipRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '郵便番号が正しくありません。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// zip_check を実行
$( 'input[name=郵便番号]' ).on( 'change blur', function() {
zip_check( $( this ) );
});
});
</script>
var zipRegex = /^\d{3}-\d{4}$/; で、3桁の数字、ハイフン、4桁の数字を指定しています。
フリガナ が全角カタカナのみで入力されているかチェック
全角のカタカナで振り仮名を入力させたい場合のコードです。
これも基本構造は同じで、「正規表現」と「エラーメッセージ」を設定します。
<script>
jQuery( function($) {
// kanaチェック
function kana_check( tgt ) {
var val = tgt.val();
if( val ) {
var kanaRegex = /^[ァ-ヶー]+$/;
if ( !kanaRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '全角カタカナで入力してください。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// kana_check を実行
$( 'input[name=フリガナ]' ).on( 'change blur', function() {
kana_check( $( this ) );
});
});
</script>
全角カタカナの場合の正規表現は以下の箇所です。
var kanaRegex = /^[ァ-ヶー]+$/;
IDが半角英数字、記号で構成されているかチェック
半角英数字のチェックです。前述と同様に「正規表現」を変更します。
<script>
jQuery( function($) {
// idチェック
function id_check( tgt ) {
var val = tgt.val();
if( val ) {
var idRegex = /^[A-Za-z0-9!@#$%^&*()_+.,:;<>?{}\[\]|]+$/;
if ( !idRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '半角英数字と記号のみを入力してください。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// id_check を実行
$( 'input[name=id]' ).on( 'change blur', function() {
id_check( $( this ) );
});
});
</script>
半角英数字、記号のみの場合の正規表現は以下の箇所です。
var idRegex = /^[A-Za-z0-9!@#$%^&*()_+.,:;<>?{}\[\]|]+$/;
パスワードの文字数を満たしているかチェック
先ほどのIDチェックのコードに、文字数の条件を満たしているかチェックするコードを追加します。
今回は12文字以上20文字以内の半角英数字、記号の条件にあってるかを例に見てみます。
<script>
jQuery( function($) {
// passチェック
function pass_check( tgt ) {
var val = tgt.val();
if( val ) {
var passRegex = /^[A-Za-z0-9!@#$%^&*()_+.,:;<>?{}\[\]|]{12,20}$/;
if ( !passRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( 'パスワードが正しくありません。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// pass_check を実行
$( 'input[name=パスワード]' ).on( 'change blur', function() {
pass_check( $( this ) );
});
});
</script>
これも前述までのコードとほぼ同じですが、以下の箇所の12,20の数値を変更すると文字数の変更ができます。
var passRegex = /^[A-Za-z0-9!@#$%^&*()_+.,:;<>?{}\[\]|]{12,20}$/;
urlが妥当かチェック
urlのチェックはやや難しいため、ここではhttp:// htts:// のありなし、英数字、ドット、ハイフン、スラッシュで構成されているかをチェックしてみます。
<script>
jQuery( function($) {
// urlチェック
function url_check( tgt ) {
var val = tgt.val();
if( val ) {
var urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
if ( !urlRegex.test( val ) ) {
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( 'URLが正しくありません。' ).css( 'display', 'block' );
} else {
tgt.closest( '.input-cont' ).addClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( '' ).css( 'display', 'none' );
}
} else {
var name = tgt.attr( 'name' );
tgt.closest( '.input-cont' ).removeClass( 'ok' );
tgt.closest( '.input-cont' ).children( '.err' ).text( name + 'を入力してください。' ).css( 'display', 'block' );
}
}
// url_check を実行
$( 'input[type=url]' ).on( 'change blur', function() {
url_check( $( this ) );
});
});
</script>
以下の箇所でurlを評価します。
var urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
必須項目が未入力の場合は送信ボタンを押せなくする
次に、必須項目が未入力の場合は送信ボタンを押せなくする方法を見てみます。
入力が完了していないことを視覚的に理解できるため、ユーザーにとってわかりやすい処理となります。
<script>
jQuery( function($) {
var items = '';
function calc() {
items = $( 'form' ).find( '.req' ).length;
i = 0;
$( 'form' ).find( '.req' ).each( function() {
if( $( this ).val() !== '' ) i++;
});
items = items - i;
if( items == 0 ) {
$( '#confirm' ).html( '送信' ).removeClass( 'disabled' );
} else {
$( '#confirm' ).html( '入力が完了していません' ).addClass( 'disabled' );
}
}
$( window ).on( 'load', function() {
calc();
})
$( 'form' ).find( 'input' ).on( 'change blur', function() {
calc();
});
});
</script>
先ほどと同様に、必須項目に req というクラスをつけます。
入力値があるかを判定する関数 calc を定義し、windowのロード時と input の変更、フォーカスは外れた時に実行します。
calcの処理では、まず、.req のクラスがついてる要素を集めて全ての値をチェックします。
未入力の数を変数、 i に格納し、未入力の数が 0 じゃなかった場合に送信ボタンのテキストを「入力が完了していません」に変更し、disabled のクラスを付与します。
問題なかった場合は、テキストを戻し、クラスを削除します。
まとめ
入力項目のチェックは一見難しそうですが、今回紹介したように入力値の判定条件を変えることで応用が効きます。
正規表現についてゼロから学習するのは難しいかもしれませんが、おそらくみんなが利用したいような条件はネット上で見つけることができると思うので、そこだけ条件設定して利用することもできると思います。
先にご紹介したようにフォームのエラーチェックはユーザー側にも、管理者側にもメリットがあるので、ぜひ実装してみてください。
