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

参照URL

https://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c

対応方法:

標準のHTML5の方法。

■※日付項目は必須項目とした場合、選択した後でもエラーメッセージ表示されたままになってる。

⇒対策:以下で選択イベントの後、メッセージ再表現させる処理を実行する。

event.target.reportValidity(); //選択した後、エラーメッセージ再表示させる。

サンプル:

HTML:

///////////////////////////////////////////////

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

以上です。