イントロダクション#
<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();
});