概要
ネイティブJavascriptで簡単なバリデーション処理を作ってみました。私自身Javascriptは全く分からずだったので、結構手こずりました。でもJavascriptの勉強にはだいぶなりましたよ。フレームワーク使えば瞬殺なんでしょうけど、ネイティブJavascriptわかってない状態でいきなりフレームワークでできました！っていうのは個人的には嫌だったので。。。
要件
例えば、以下のようなHTMLに対して、Javascriptでバリデーションをかけます。
<form action='/userinfo' method = 'post' id = 'userinfo'>
<input type = 'email' placeholder = '電子メールアドレス' id = 'email'>
</form>
今回は以下のバリデーションパターンとなります。
・文字が入力されているか
・メールアドレスの形式になっているか
Javascriptコード
以下を参考にしました。
参考サイト
http://blog.tofu-kun.org/070920122122.php
http://makky12.hatenablog.com/entry/2016/08/26/205012
汚いコードですみませんが、成果物は以下です。
function checkemail(){
var emailid = document.getElementById('email');
//xxxxx@yyyy.zzzの形式かどうかをチェック
var emailreg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
//エラーメッセージ表示用divタグのid名の一部に利用する
var errorid = 'checkmailerror'
//emailタグの親要素はformであり、これを使いまわすため、変数として定義
var formid = document.getElementById('userinfo');
var divtag = document.getElementsByTagName('div');
//変数erroridの正規表現
regobj = new RegExp(errorid);
//同じエラーメッセージが何度も表示されないように
//前回のエラーメッセージを拾って消去する。
for(i = 0; i < divtag.length; i++){
if(divtag[i].id.match(regobj)){
formid.removeChild(divtag[i]);
}
}
//emailのバリデーション
if(!emailid.value){
var error = document.createElement('div');
//メッセージ表示のためのdivタグのidは重複を避けるため
//erroridと固有の文字列を結合している。
error.id = errorid + 'notvalue';
var errormsg = document.createTextNode('メールアドレスが入力されていません');
error.appendChild(errormsg);
//上記により<div id = 'checkmailerrornotvalue'>メールアドレスが入力されていません</div>が生成される。
formid.insertBefore(error,emailid.nextSibling);
//・メールアドレスの形式で入力されているかどうか
}else if(!emailid.value.match(emailreg)){
var error = document.createElement('div');
error.id = errorid + 'notmatch';
var errormsg = document.createTextNode('メールアドレスの形式になっていません');
error.appendChild(errormsg);
formid.insertBefore(error,emailid.nextSibling);
}
}
DOMちゃんとわかっていればすぐに書けるんですけど、付け焼刃ではなかなか厳しかったですね。
はまっていたのは以下
formid.insertBefore(error,emailid.nextSibling);
当たり前のことですが、テキストボックスがformの中にある場合は親要素がformになります。
親要素がformのemailidに対してhtmlを生成、とする必要があります。私はここを適当にdocument.bodyとかやっていたので（あほ）
少々はまっていました。
あと個人的に気になったのはinsertAfterは存在せず、insertBeforeで代替する必要があるということですね。
詳細は以下
https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore
なんでこんなことしてんの？
申し込みフォームをフロントからバックまで一通り実装してみようかなと思ったから。勉強のため。
勉強なのでできる限りフレームワーク使わないで実装中。なお、バックエンドはruby（sinatra）の模様。
AdobeのID取得ページを参考にレイアウトしています。デザインダサいですが、実装を学びたかったのでそこは勘弁。
https://adobe.ly/2IyLwGa
なお、画面含めたクソコードは以下にあります。
https://github.com/gitk47320/applyform
結構コードキレイにしたいけどとりあえず次はバックエンド行きます。バックエンドは余裕で行けるはず・・・