0

以下のフォームバリデーション用のコードがあるのですが

HTMLFormElement.prototype.getInvalidElements = function(_isNotCheckEmpty = false){
    // エラーメッセージ
    const invalidMessages = {
        email  : "メールアドレスの形式が正しくありません",
        tel    : "入力形式が正しくありません",
        number : "数字で入力してください",
    };
    const invalidElements = [];
    const formElements    = this.elements;
    for(const elem of formElements){
        const required = elem.required;
        const type     = elem.type;
        const value    = type !== "checkbox" && elem.value || elem.checked && elem.value || "";
        const empty    = elem.getAttribute("data-empty")   || "この項目は入力必須です";
        const invalid  = elem.getAttribute("data-invalid") || invalidMessages[type] || "入力内容が正しくありません";
        const parent   = elem.parentNode;
        // hidden フィールドは無視する
        if("hidden" === type){
            continue;
        }
        // バリデーション検証
        if(elem.validity.valid || _isNotCheckEmpty && required && !value){
            elem.setErrorMessage();
        } else{
            const message = (required && value || !required) && invalid || required && !value && empty || "値が正しくありません";
            // エラー表示
            elem.setErrorMessage(message);
            // エラー要素を配列に追加
            // オブジェクトではなく、elem だけ追加しても良い
            invalidElements.push({
                element: elem,
                require: required,
                type   : type,
                message: message,
            });
        }
    }
    return invalidElements;
}
// 入力要素の兄弟要素(<small>か疑似要素)にエラーメッセージを追加する
Element.prototype.setErrorMessage = function(_message){
    if(!/^(input|textarea|select)$/i.test(this.tagName)){
        return false;
    }
    const elem   = this;
    const parent = this.parentNode;
    // エラーメッセージ用の<small>要素
    // 疑似要素でエラーを表示する場合は不要
    const invalidMessages = parent.querySelectorAll("small.message-invalid");
    invalidMessages.forEach( $smi => $smi.remove() );
    if(!_message){
        parent.removeAttribute("data-message-invalid");
        elem.classList.remove("invalid");
        return false;
    }
    // エラーメッセージ用の<small>要素のposition基準とするため、staticの場合はrelativeに変更
    if(window.getComputedStyle(parent).position === "static"){
        parent.style.position = "relative";
    }
    parent.setAttribute("data-message-invalid", _message);
    elem.classList.add("invalid");
    // 以下、<small>要素でエラーメッセージを表示するため
    const parentRect  = parent.getBoundingClientRect();
    const elementRect = elem.getBoundingClientRect();
    const isHidden      = !elementRect.left && !elementRect.right;
    const rightPosition = isHidden ? 0 : parentRect.right - elementRect.right;
    const topPosition   = isHidden ? parentRect.bottom - parentRect.top + 8 : elementRect.bottom - parentRect.top + 8;
    // <small>要素を入力要素の右端に揃える
    // 見えない要素の場合は親要素の中央に表示
    const invalidMessage = parent.appendChild(document.createElement("small"));
    invalidMessage.className = "message-invalid";
    invalidMessage.innerText = _message;
    invalidMessage.style.position  = "absolute";
    invalidMessage.style.left      = "0px";
    invalidMessage.style.right     = rightPosition + "px";
    invalidMessage.style.top       = topPosition + "px";
    invalidMessage.style.textAlign = "right";
    if(isHidden){
        invalidMessage.style.textAlign = "center";
    }
    return true;
}
window.addEventListener("DOMContentLoaded", function(){
    // フォーム (取得方法はなんでも良いです)
    const form = document.getElementById("test_user_form");
    // 送信ボタン
    const submitButton = document.getElementById("user_submit_button");
    // 送信ボタン押下前
    let isNotCheckEmpty = true;
    // イベント登録
    submitButton.onclick = function(){
        // 空の必須入力要素をチェックする
        isNotCheckEmpty = false;
        // バリデーションを通過しない入力要素を全て取得する
        const invalidElements = form.getInvalidElements(isNotCheckEmpty);
        // コンソールに表示
        console.log(invalidElements);
        // 問題なければ送信処理
        document.getElementById("validation_status").innerText = invalidElements.length > 0 ? "入力内容に問題があります。" : "すべて通過しました!";
        // HTML5 のデフォルトバリデーション動作を停止させる
        return false;
    };
    // イベント登録
    for(const elem of form.elements){
        elem.addEventListener("change", function(){
            form.getInvalidElements(isNotCheckEmpty)
        }, false);
        elem.addEventListener("blur", function(){
            form.getInvalidElements(isNotCheckEmpty)
        }, false);
    }
}, false);

1行目に書かれている

HTMLFormElement.prototype.getInvalidElements = function(_isNotCheckEmpty = false){

この引数が「_isNotCheckEmpty = false」になっているのですが、
実際にgetInvalidElementsが呼び出されている箇所を見ると

const invalidElements = form.getInvalidElements(isNotCheckEmpty);

渡す変数は「isNotCheckEmpty」になっています。
引数が「_isNotCheckEmpty = false」になると渡された変数はどうなっているのか理解できません。
勉強不足で申し訳ありませんが、どなたか解説をお願いできますでしょうか。
よろしくお願いいたします。

1 件の回答 1

2

プロトタイプベースかどうかは関係なく、ES2015 のデフォルト引数という構文です。
form.getInvalidElements() と引数なしで呼び出した場合に false になります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters

1
  • ありがとうございます! デフォルト引数というものがあるのですね。 解決できました。 2022年8月3日 10:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。