java - Spring + Thymeleaf 验证动态生成的字段

Question

我正在尝试验证动态生成的输入字段。下面的代码将为我们提供更多输入:

HTML 代码:

 <th:block th:each="word,itera : ${credentialsForm.credentialRequirements}">
          <div class="rtr_credential" style="display: inline-block;">
            <span th:text="${word.attribute}" ></span>
            <input type="hidden"  th:name="|credentialRequirements[${itera.index}].attribute|" th:value="${word.attribute}">
          </div>
          <div class="rtr_credential" style="display: inline-block;">
            <input type="text"  name="userValue" th:field="*{credentialRequirements[__${itera.index}__].userValue}" class="userValue" maxlength="30"
              th:classappend="${#fields.hasErrors('userValue')}? has-error : ''">  
          </div>
        </th:block>

它会给出错误，因为 userValue 不在凭据表单中，并且如果我包含 th:classappend="${#fields.hasErrors('{credentialRequirements[__${itera.index}__].userValue}')}? has-error : ''"> 这将引发索引错误。 Java类结构:

public class CredentialRequirementForm {


    private List<CredentialRequirements> credentialRequirements;

    public List<CredentialRequirements> getCredentialRequirements() {
        return credentialRequirements;
    }
    public void setCredentialRequirements(List<CredentialRequirements> credentialRequirements) {
        this.credentialRequirements = credentialRequirements;
    }

}

CredentialRequirements.java

public class CredentialRequirements {


    private String attribute;
    private String carrierDescription;
    @NotBlank
    @NotNull
    private String userValue;



    public CredentialRequirements() {
        super();
        // TODO Auto-generated constructor stub
    }

    public CredentialRequirements(String attribute, String carrierDescription, String userValue) {
        super();
        this.attribute = attribute;
        this.carrierDescription = carrierDescription;
        this.userValue = userValue;
    }

    public String getAttribute() {
        return attribute;
    }
    public void setAttribute(String attribute) {
        this.attribute = attribute;
    }
    public String getCarrierDescription() {
        return carrierDescription;
    }
    public void setCarrierDescription(String carrierDescription) {
        this.carrierDescription = carrierDescription;
    }


    public String getUserValue() {
        return userValue;
    }

    public void setUserValue(String userValue) {
        this.userValue = userValue;
    }

    @Override
    public String toString() {
        return "CredentialRequirements [attribute=" + attribute + ", carrierDescription=" + carrierDescription
                + "]";
    }

}

如何验证 userValues，它是动态生成的，有时只有 1 个属性，有时有 5 个属性。我也在尝试 Jquery 验证，但很困惑如何实现。

Answer 1

为什么不简单地使用 th:field 属性将 HTML 字段绑定(bind)到实体字段？然后你可以添加一个带有错误消息的div(如果会有验证错误):

<th:block th:each="word,itera : ${credentialsForm.credentialRequirements}">
    <div class="rtr_credential" style="display: inline-block;">
        <span th:text="${word.attribute}" ></span>
        <input type="hidden" th:field="*{credentialRequirements[__${itera.index}__].attribute}">
    </div>
    <div th:if="${#fields.hasErrors('credentialRequirements[__${itera.index}__].userValue')}"  th:errors="*{credentialRequirements[__${itera.index}__].userValue}">
        Error message
    </div>
    <div class="rtr_credential" style="display: inline-block;">
        <input type="text"  name="userValue" th:field="*{credentialRequirements[__${itera.index}__].userValue}" class="userValue">  
    </div>
</th:block>