参照URL
https://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c
対応方法:
標準のHTML5の方法。
■※日付項目は必須項目とした場合、選択した後でもエラーメッセージ表示されたままになってる。
⇒対策:以下で 選択イベントの後、メッセージ再表現させる処理を実行する。
event.target.reportValidity(); //選択した後、エラーメッセージ再表示させる。
サンプル:
HTML:
///////////////////////////////////////////////
<template for:each={list} for:item=”item” >
<li key={key} class=”slds-m-around_xxx-small”>
<lightning-input class=”inputCmp” //JS側検索用
type=”date”
required //必須
label=”test01″></lightning-input>
</li>
</template>
///////////////////////////////////////////////
JS:
///////////////////////////////////////////////
let inputCmp = this.template.querySelectorAll(“.inputCmp”); //すべての入力をチェックする
let hasError = false;
inputCmp.forEach(el => {
if (!el.validity.valid) { //入力にエラーがある場合
el.reportValidity(); //エラーメッセージ表示
hasError = true; //エラーあり
}
});
if(hasError) { //エラーがある場合、処理中止
return;
}
//以下その他処理続く
///////////////////////////////////////////////
その他エラー関係:
エラーメッセージカスタマイズ表示の場合:
①以下を利用可能。
<lightning-input message-when-bad-input=”Your entry must be at least 5 characters.”
message-when-bad-input
message-when-value-missing
②JSでカスタマイズ表示できる。
const VALID_MESSAGE_REQUIRED = "入力してくださいね-!✋"; const VALID_MESSAGE_PATTERN = "正しい構文で入力してくださいね-!✋"; const VALID_MESSAGE_TYPE = "指定されている形式で入力してくださいね-!✋"; $("input").each(function(index, elem) { if(elem.validity.valueMissing){ elem.setCustomValidity(VALID_MESSAGE_REQUIRED); //カスタマイズエラー設定 } elem.addEventListener("keyup", function (event) { if(elem.validity.valueMissing){ elem.setCustomValidity(VALID_MESSAGE_REQUIRED); } else if(elem.validity.typeMismatch) { elem.setCustomValidity(VALID_MESSAGE_TYPE); } else { elem.setCustomValidity(""); //エラー非表示 } }); });
以上です。