フォームチェック作成 （メモ）
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(){
const MSG_TEXT_MAX = '20文字以内で入力してください。';
const MSG_EMPITY ='入力必須です。';
const MSG_EMAIL_TYPE ='emailの形式ではありません。';
const MSG_TEXTAREA_MAX ='100文字以内で入力してください。';
ーーーーーーー
定数⇨値を入れる箱（一回書いたら中身を書き換えられない）
書き方）const 〜（基本は大文字）
・エラーメッセージとして表示させる定数
------------------イベント1:名前入力フォーム-----------------
$(".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_TSXT_MAX);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
ーーーーーーー
クラス属性が「valid-text」のものにキーアップイベントを指定⇨function以下の処理が実行
・(this) ⇨ 名前入力フォーム（".valid-text"を指す）
・.closest⇨自分以上の親の要素且つ（）の中で指定したものを取得
（今回の場合、名前フォームから見て親要素（form-group））
・length > 20 ){ ⇨文字数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」へ書き換える
※find ⇨ 子以下の要素の中で（）のものを探す意味合い（この場合"helpーblock"）
・}else{ ⇨20文字以内の場合
・form_g.removeClass('has-error').addClass('has-success');
⇨ノードに対して付いているクラス属性を削除
・form_g.find('.help-block').text('');
⇨class属性help-blockを探して「空」にする
【まとめ】
名前入力フォームにキーがある度に、入力された文字数が20文字以上かどうかを判定し、
＜20文字以上の場合＞
class属性「form-group」にclass属性「has-error」を追加し、
class属性「help-block」がついた要素の中にエラーメッセージを表示させる。
＜20文字以内の場合＞
「form-group」の「has-error」を削除し、「has-success」を追加し、何も表示させない。
------------------イベント2:emailフォーム-----------------
$(".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-success').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('');
}
});
ーーーーーーー
!$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) )
⇨『正規表現』
＜正規表現＞
文字列のルールを決めて、そのルールに当てはまるかをチェックする書き方（ルールの書き方）
（この場合はEメール形式かどうか確認している）
※jQueryの場合、「.match」を使う
（例）$('p').val().match(/^(/^AAA/)
・文字列の先頭がAAAで始まってるかどうかを確認
⇨正しいか否かをチェックできる
※「正規表現 email」「正規表現 TEL」などで調べて使うようにする
・入力文字数が50文字を超えた場合、またはEメール形式ではない場合、{ }の処理を実行
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」がついた段階でCSSで指定されているものに内容が変わる。
⇨文字色が赤くなり、枠線も赤くなる
・20文字以上の場合、「has-error」というクラス名がつく
・20文字以内の場合、クラス名「has-success」がつき、文字色と枠線が青くなる
【まとめ】
jQuery：判定内容でクラス名を書き換える
CSS：書き換えたクラス名の「見た目（スタイル）」を定義
正規表現：文字列がある形式に沿っているかどうかチェック
