イントロダクション#
<form> 内の入力可能なコントロールにデータ検証を行う際に、Bootstrap - Forms - Validation に従って、コントロールに required、minlength、maxlength などの一般的なネイティブ検証属性を追加できます。
より複雑なビジネスロジックがある場合は、JavaScript を使用してカスタム検証ルールを作成することもでき、これによりフォーム検証の自由度が増します。本記事では、その実装方法を紹介します。
使用方法#
function validate(inputID) {
const input = document.getElementById(inputID);
const validityState = input.validity;
if (validityState.valueMissing) {
input.setCustomValidity("これを埋める必要がありますよ！");
} else if (validityState.rangeUnderflow) {
input.setCustomValidity("もっと大きな数字が必要です！");
} else if (validityState.rangeOverflow) {
input.setCustomValidity("大きすぎます！");
} else {
input.setCustomValidity("");
}
// すぐにHTMLネイティブのコントロール検証メッセージを表示
input.reportValidity();
}
// フォーカスを失った後にパスワードルールを検証
$('#password').on('blur', function (e) {
const password = $(this).val();
// 私たちがカスタムした検証メソッド
if (validatePassword(password)) {
// パスワードが要件を満たしています
// エラーがない場合は、メッセージを空の文字列に設定する必要があります。これにより、フォーム検証が通過し、checkValidity() を呼び出した後に true が返されます
this.setCustomValidity('');
} else {
// パスワードが要件を満たしていません
// エラーメッセージが空でない限り、フォームは検証を通過しません（checkValidity() を呼び出した後に false が返され）、送信されません
// 現在Bootstrapのフォーム検証メッセージを使用しているため、ここで提供されるエラーメッセージは実際にはページに表示されず、現在のコントロールが検証を通過しないようにするためだけのものです
this.setCustomValidity('パスワードは一致する必要があります');
}
// reportValidity() はすぐにHTMLネイティブのコントロール検証メッセージを表示しますが、現在Bootstrapの検証メッセージを使用しているため、ここではそれを呼び出してネイティブの検証メッセージをトリガーしません
//this.reportValidity();
});