90310


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

[code]

    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);
    
[/code]

1行目に書かれている

[code]

    HTMLFormElement.prototype.getInvalidElements = function(_isNotCheckEmpty = false){
    
[/code]

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

[code]

    const invalidElements = form.getInvalidElements(isNotCheckEmpty);
    
[/code]

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


CC BY-SA 4.0
2022-08-01T10:07:37.693
90306
2022-08-01T11:34:58.307
53798
question
javascript
JavaScriptのプロトタイプベースで書かれたコードの引数について


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

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


CC BY-SA 4.0
2022-08-01T11:34:58.307
90310
2022-08-01T11:34:58.307
241
90306
answer