■ クライアント側でのバリデーション方法
【１】 HTML5 + JavaScript でバリデーション ★ 今回は、こっちを扱う ★ 【２】 jQuery Validation Plugin でバリデーション
■ 使用できる属性
* input の type="date, time, number, email etc" * required <= 必須項目 * maxlength/max/min * pattern <= 正規表現が使用できる参考文献
https://dev.classmethod.jp/ria/html5-forms/
http://www.atmarkit.co.jp/ait/articles/1104/25/news137.html
■ 制約検証API
http://cccabinet.jpn.org/bootstrap4/components/formsより抜粋 ～～～～～～～～～～～～～ ・すべての最新ブラウザは、フォームコントロールを検証する一連の JavaScriptメソッドである制約検証APIをサポート済み。 ・JavaScriptで setCustomValidity を使用してカスタムの有効性メッセージを提供可能。 ～～～～～～～～～～～～～
API
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validationsetCustomValidity()
https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLInputElement/setCustomValidity/・input要素を、任意のメッセージを指定してカスタム検証エラー状態にする ・空の文字列を指定した場合は、カスタム検証エラー状態を解除
checkValidity()
https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLInputElement/checkValidity/・input要素の入力内容の検証を実行 => 検証エラーがある場合にだけ、invalidイベントが発生 ・返り値(true/false)で、検証結果が得られるサンプル 抜粋
// 要素の取得
var element = document.getElementById("hoge");
// checkValidity()
function myMethod() {
// メソッドを実行
element.checkValidity() ;
}
// invalidイベントのコールバック関数
function callbackFunction(event) {
// ...
}
// invalidイベントを設定
element.addEventListener("invalid", callbackFunction) ;
</script>
■ サンプル
<!doctype html>
<html lang="jp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<form id="sampleForm" class="needs-validation" action="" method="post">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">名字</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="名字" name="familyName" value="" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">名前</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="名前" name="firstName" value="" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">ユーザー名</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" name="userName" placeholder="ユーザー名"
aria-describedby="inputGroupPrepend" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustomDateStart">開始日</label>
<input type="date" class="form-control" id="validationCustomDateStart" name="startDate" placeholder="開始日"
onblur="isValidDates();" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustomDateEnd">終了日</label>
<input type="date" class="form-control" id="validationCustomDateEnd" name="endDate" placeholder="終了日"
onblur="isValidDates();">
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="validationCustomUsername">メモ</label>
<div class="input-group">
<textarea id="validationMemo" name="memo" placeholder="メモ" rows="3" maxlength="200" required></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" name="agreement" required>
<label class="form-check-label" for="invalidCheck">
利用規約に同意する
</label>
<div class="invalid-feedback">
提出する前に同意する必要があります
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">フォームを送信</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>
(function() {
})();
$('#sampleForm').submit(function() {
return isValidDates();
});
function isValidDates() {
console.log("Enter...");
var inputCustomDateEnd = document.getElementById("validationCustomDateEnd");
inputCustomDateEnd.setCustomValidity("");
var endDateValue = $("#validationCustomDateEnd").val();
if (!endDateValue) {
return true;
}
var startDate = new Date($("#validationCustomDateStart").val());
var endDate = new Date(endDateValue);
if (endDate < startDate) {
inputCustomDateEnd.setCustomValidity("開始日より未来日付は指定できません");
console.log("Error");
return false;
}
return true;
}
</script>
<style type="text/css">
input:invalid, textarea:invalid {
border-color: red;
color: red;
&:focus {
box-shadow: 0 1px 0 0 red;
}
}
</style>
</body>
</html>
参考文献
http://phiary.me/client-side-validation/https://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c