Lighting Web コンポネット LWC 入力チェック

参照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でカスタマイズ表示できる。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api

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(""); //エラー非表示
        }
    });
});

​以上です。