Javascriptを使ったバリデーションの実装について学習記録用として残しておきます。
動かすことを目的としているのでスタイルシートは最低限の記述にしています。
今回使った技術、ライブラリ等
・bootstrap
・jQuery
・Javascript
・HTML
・SCSS
概要
今の会社でバリデーションチェックや、アラート表示などちょっとしたJavascriptを書く機会が増えたので使いまわせるようにある程度の型を作っておくと良いかと考えた
HTMLファイルの作成
まずはHTMLファイルに必要最低限のコードを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<!----------------- css読み込み ------------>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<link rel="stylesheet" href="scss/style.css">
</head>
<body>
<!------------------ フォームバリデーションチェック --------------->
<form action="" method="post" id="formSubmit">
<div class="mb-3">
<label for="name">name</label>
<input id="name" class="form-control" type="text" placeholder="名前を入力して下さい">
<!--- バリデーションに引っかかった時に表示させる用のdivタグ --->
<div id="message"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control formText" id="email" placeholder="name@example.com">
<!--- バリデーションに引っかかった時に表示させる用のdivタグ --->
<div id="message1"></div>
</div>
<button type="submit" class="btn btn-outline-secondary">送信</button>
</form>
<!------------- javascript読み込み --------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS（SCSS）ファイルの作成
今回はscssを使いました。
こちらも最低限です。
@charset "utf-8";
$validation : #d63384;
img{
width: 100%;
height: 100%;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
margin: 0 0 0 0;
}
a{
text-decoration: none;
}
p{
font-family: 'Courier New', Courier, monospace;
}
#message,#message1{
color: $validation;
}
Jsファイルの作成
//バリデーションチェック
document.getElementById('formSubmit').addEventListener('submit',function(event){
//バリデーションチェック
// 変数の定義
var check = /^[a-zA-Z0-9_+-]+(\.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let validation = true;
if(name === ""){
document.getElementById('message').innerHTML = "名前を入力して下さい";
validation = false;
} else{
document.getElementById('message').innerHTML = "";
}
if(!check.test(email)){
document.getElementById('message1').innerHTML = "メールアドレスの形式で入力して下さい";
validation = false;
}else{
document.getElementById('message1').innerHTML = "";
}
// バリデーションに引っかかった場合は送信させない
if(!validation){
event.preventDefault();
}
});
他にも使いまわせそうなコードがあったら随時追記していきたいと思います。