Rest バリデーションエラーメッセージ

こういったThmeleafがあったとき、Restでのバリデーションメッセージ表示の実装方法として、エラーごとにHTML要素とマッピングする記述は必要なさそうです。

HTML

<form th:object="${inputForm}" id="inputForm">
<table class="inputTable">
    <tbody>
    <tr>
        <th>姓</th>
        <td>
            <input th:field="*{firstName}">
            <div id="firstNameError" class="text-danger"></div>
        </td>
    </tr>
    <tr>
        <th>名</th>
        <td>
            <input th:field="*{lastName}" class="wide">
            <div id="lastNameError" class="text-danger"></div>
        </td>
    </tr>
    <tr>
        <th>姓（フリガナ）</th>
        <td>
            <input th:field="*{firstNameKana}">
            <div id="firstNameKanaError" class="text-danger"></div>
        </td>
    </tr>
    <tr>
        <th>名（フリガナ）</th>
        <td>
            <input th:field="*{lastNameKana}" class="wide">
            <div id="lastNameErrorKana" class="text-danger"></div>
        </td>
    </tr>
    </tbody>
</table>
</form>

Before：
エラーとidを1つずつマッピングしてる例（以前これでやってました・・・・）
javascript

// 中略
.then(response => {
    const responseData = response.data;

    // エラー表示初期化
    clearSearchError();

    // バリデーションエラーがある場合、項目ごとに表示
    if (responseData.success === false && responseData.errors) {
        const errors = responseData.errors;
    
        // エラー表示　項目の分だけ記載していく・・・・
        if (errors.firstNameError) {
            document.getElementById('firstNameError').innerText = errors.firstNameError;
        }
        if (errors.firstNameKanaError) {
            document.getElementById('firstNameKanaError').innerText = errors.firstNameKanaError;
        }
        if (errors.lastNameError) {
            document.getElementById('lastNameError').innerText = errors.lastNameError;
        }
        if (errors.lastNameKanaError) {
            document.getElementById('lastNameKanaError').innerText = errors.lastNameKanaError;
        } 

    })
    .catch(error => {
        console.error("通信エラー:", error);
    });
}

After：
HTML側のエラー表示タグのidに、フィールド名 + Error を指定しておけば、Javascript側は一括処理できます。項目が増えたり、フィールド名称が変わってもjavascriptは変更不要となります。エラーメッセージを反映するHTMLの設計だけで対応できるようになります。
javascript

// 中略
.then(response => {
    const responseData = response.data;

    // エラー表示初期化
    clearSearchError();
    
    // HTML側のidには、フィールド名 + Error を指定しておく。
    Object.keys(errors).forEach(key => {
        const errorElement = document.getElementById(`${key}Error`);
        if (errorElement) {
            errorElement.innerText = errors[key]
        }
    })
    .catch(error => {
        console.error("通信エラー:", error);
    });
};