JavaScriptからValidityのエラー詳細を取得することができます。
| 名前 | 内容 |
| element.willValidate | 入力チェックが行われるか(true/false) |
| element.setCustomerValidity(エラーメッセージ) | 任意のエラーメッセージをセット |
| element.validity.valueMissing | 入力必須（required属性）なのに入力がない場合true |
| element.validity.valueTypeMismatch | pattern属性のパターンに一致しない場合true |
| element.validity.tooLong | maxlengthより入力文字数が長い場合にtrue |
| element.validity.rangeUnderflow | min属性より値が小さい場合にtrue |
| element.validity.rangeOverflow | max属性より値が大きい場合にtrue |
| element.validity.stepMismatch | 入力値がstep属性で指定された値と一致しない場合にtrue |
| element.validity.customError | 独自エラーが設定されている場合にtrue |
| element.validity.valid | 入力チェックを全て通る場合にtrue |
| element.validity.checkValidity() | 入力チェックを全て通る場合にtrue。falseの場合にinvalidイベントを生成 |
| element.validity.validationMessage | 入力チェックが行われた際のエラーメッセージを返却 |
下の例は、フォームに値を入力してから「送信」ボタンを押すとチェック結果が表示されます。
<script type="text/javascript">
function check() {
var f = document.myForm;
var items = f.elements;
var len = items.length;
for(var i=0;i<len;i++){
var elm = items.item(i);
if (elm.nodeName == "INPUT" && elm.validity){
var elm_error = f.querySelector("#" + elm.name + "_error");
if(elm_error) elm_error.innerHTML = "";
// 入力値エラーだった場合
if(elm.validity.valid == false) {
// 入力値エラーの種類の判定とエラー・メッセージの定義
var err_msg = "";
// 必須入力に値がない場合
if(elm.validity.valueMissing) {
err_msg = "入力をご確認ください。";
}
// 入力タイプが違う場合
else if(elm.validity.typeMismatch) {
err_msg = "入力フォーマットをご確認ください。";
}
// 入力パターンが違う場合
else if(elm.validity.patternMismatch) {
err_msg = "入力形式をご確認ください。";
}
// 入力数値が小さすぎる場合
else if(elm.validity.rangeUnderflow) {
err_msg = "１８歳未満は受付できません。";
}
// 入力数値が最大値を超える場合
else if(elm.validity.rangeOverflow) {
err_msg = "66歳以上は受付できません。";
}
// 入力内容が最大長を超える場合
else if(elm.validity.tooLong) {
err_msg = "入力内容が長すぎます。";
}
// その他のエラー
else {
err_msg = "入力内容をご確認ください。";
}
// エラーメッセージ表示
if(elm_error) elm_error.innerHTML = err_msg;
}
}
}
}
</script>
<form id="personInfo" name="myForm" action="">
<p>氏名: <input type="text" name="name" maxlength="5" required placeholder="名前を入力します。">
<span id="name_error" style="color: #FF0000;"></span></p><br>
<p>年齢：<input type="number" name="age" min="18" max="65" required placeholder="年齢を数値で入力します。">
<span id="age_error" style="color: #FF0000;"></span></p><br>
<p>住所: <input type="text" name="address" required placeholder="東京都渋谷区・・">
<span id="address_error" style="color: #FF0000;"></span></p><br>
<p>メールアドレス: <input type="email" name="email" required placeholder="xxxx@google.com">
<span id="email_error" style="color: #FF0000;"></span></p><br>
<p>電話番号: <input type="tel" name="tel" required pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{4}" placeholder="03-1234-5678">
<span id="tel_error" style="color: #FF0000;"></span></p><br>
<p><button type="button" onclick="check()">送信</button></p>
</form>
