入力フォームチェック作成のメモ - プログラミング学習帳

jsファイル

——————————————————————

$(function(){

const MSG_TEXT_MAX = '20文字以内で入力してください。';
const MSG_EMPITY = '入力必須です。';
const MSG_EMAIL_TYPE = 'emailの形式ではありません。';
const MSG_TEXTAREA_MAX ='100文字以内で入力して下さい。';

$(".valid-text").keyup(function(){

var form_g = $(this).closest('.form-group');

if($(this).val().length > 20 ){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_TEXT_MAX);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
}
});

$(".valid-email").keyup(function(){

var form_g = $(this).closest('.form-group');

if( $(this).val().length === 0 ){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_EMPTY);
}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) ){
form_g.removeClass('has-sucess').addClass('has-error');
form_g.find('help-block').text(MSG_EMAIL_TYPE);
}else{
form_g,removeClass("has-error").addClass('has-success');
form_g.find('.help-block').text('');
}
});

——————————————————————

解説

・入力フォームの内容をチェックするには、jqueryを使って「バリデーション」機能を作る
・バリデーションを行うには、各入力フォームに対して、「キーが入力されたら〜」というイベントをセットしてあげる
・イベントが発生した時には、if文を使って入力文字数などのチェックをして、エラーの場合にはエラーメッセージを表示させる

————————定数ボックス—————————

$(function(){

——————————————————————

・エラーメッセージとして表示させる定数

———イベント１：名前入力フォーム————————

$(".valid-text").keyup(function(){

——————————————————————

(this) →名前入力フォーム

length > 20 ){ →文字数が２０文字を越えた場合

form_g.removeClass('has-success').addClass('has-error');→

そのノード（要素）についてるclass属性「has-success」を削除し、 class属性「has-error」を追加

form_g.find('.help-block').text(MSG_TEXT_MAX);→ class属性「help-block」を探し、そのタグの中のテキストを「MSG_TEXT_MAX」へ書き換える

}else{ → 20文字以内の場合
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text(''); → class属性help-blockを探して「空」にする

【まとめ】

名前入力フォームにキー入力がある度に、入力された文字数が２０文字以上かどうかを判定し、２０文字以上の場合、
class属性「form-group」、にclass属性「has-error」を追加し、class属性「help-block」がついた要素の中にエラーメッセージを表示させる。２０文字以内の場合、「form-group」の「has-error」を削除し、「has-success」を追加し、何も表示しない。

——————イベント２：emailフォーム————————

$(".valid-email").keyup(function(){

var form_g = $(this).closest('.form-group');

——————————————————————

!$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/)

→正規表現

・正規表現とは、文字列のルールを決めて、そのルールに当てはまるかをチェックする書き方（ルールの書き方）

・ここでの場合、Eメール形式かどうか確認している

・入力文字数が５０文字を越えた場合、またはEメール形式ではない場合、{ }の処理を実行します。

・jQueryの場合、正規表現「.match」を使う

———————例————————
＄('p').val().match(/^(/^ABC/)

———————————————

・文字列の先頭がABCで始まってるかどうかを確認→「正しい」か「間違い」をチェックできる

・正規表現の書き方は難しいため、「正規表現　email」などとネットで調べてコピペする

CSSファイル

——————————————————————

/*バリデーション*/
.help-block{
font-size:14px;
margin-left: 10px;
}
/*エラー時*/
.has-error input, .has-error textarea{
border: 1px solid #ff4ddb;
}
.has-error .help-block, .has-error label{
color: #ff4d4b;
}
/*サクセス時*/
.has-success input, .has-success textarea{
border: 1px solid #2fb4ce;
}
.has-success .help-block, .has-success label{
color: #2fb4ce;
}

——————————————————————

解説

・２０文字を越えた場合、「has-error」というクラス名がつく
・クラス名「has-error」がついた段階で、CSSで指定されているものに内容が変わる。なので、文字色の色が赤くなって、枠線も赤くなる

・２０文字以内の場合、クラス名「has-success」がつき、文字色と枠線が青くなる。

【まとめ】
jquery→クラス名を書き換える
CSS→書き換えたクラス名の「見た目」を指定する
正規表現→文字列が形式に沿ってるかどうかチェックする

予備

「\（バックスラッシュ）」→ option＋¥