以下のフォームバリデーション用のコードがあるのですが
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」になると渡された変数はどうなっているのか理解できません。
勉強不足で申し訳ありませんが、どなたか解説をお願いできますでしょうか。
よろしくお願いいたします。