lightning input required エラーメッセージの問題と解決方法

必須属性の設定を確認する: Lightningコンポーネント内のinput要素には、必須属性（required="true"）を適切に設定する必要があります。必須属性が正しく設定されているかどうかを確認してください。

例:

<lightning:input type="text" label="名前" required="true" />

リアルタイムバリデーションを使用する: 必須フィールドのバリデーションをリアルタイムで行うことで、エラーメッセージを即座に表示することができます。Lightning Auraコンポーネントのonchangeイベントやonblurイベントを使用して、フィールドの値を監視し、必須フィールドが入力されていない場合にエラーメッセージを表示します。

例:

<lightning:input type="text" label="名前" onchange="{!c.validateName}" />

validateName: function(component, event, helper) {
    var nameInput = component.find("nameInput");
    var nameValue = nameInput.get("v.value");

    if(!nameValue) {
        nameInput.set("v.validity", {valueMissing: true});
        nameInput.showHelpMessageIfInvalid();
    }
}

カスタムバリデーションを作成する: もしもデフォルトのエラーメッセージではなく、独自のエラーメッセージを表示したい場合は、カスタムバリデーションを作成することができます。Lightning AuraコンポーネントのshowHelpMessageIfInvalidメソッドを使用して、カスタムエラーメッセージを表示します。

例:

<lightning:input type="text" label="名前" onchange="{!c.validateName}" />

validateName: function(component, event, helper) {
    var nameInput = component.find("nameInput");
    var nameValue = nameInput.get("v.value");

    if(!nameValue) {
        nameInput.set("v.validity", {valueMissing: true});
        nameInput.set("v.errorMessage", "名前を入力してください。");
        nameInput.showHelpMessageIfInvalid();
    }
}