入力要素のチェック2

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>