Spring + Thymeleaf 验证动态生成的字段答案

【问题标题】：Spring + Thymleaf validation for dynamic generated fieldsSpring + Thymeleaf 验证动态生成的字段
【发布时间】：2020-01-13 22:08:58
【问题描述】：

我正在尝试验证动态生成的输入字段。下面的代码会给我们更多的输入：

来自 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 不在 credentialsForm 中，如果我包括 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 验证，但混淆了如何实现。

【问题讨论】：

标签： java html spring-boot validation thymeleaf

【解决方案1】：

您为什么不简单地使用th:field 属性将HTML 字段绑定到您的实体字段？然后你可以添加一个带有错误信息的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>

【讨论】：

感谢您的回答，我试过了，但它不起作用，根据要求，如果存在任何验证错误，我们必须以红色突出显示列，因此附加 css 类。
您可以尝试关注：<input type="text" name="userValue" th:field="*{credentialRequirements[__${itera.index}__].userValue}" th:class="${#fields.hasErrors('credentialRequirements[__${itera.index}__].userValue')} ? 'userValueError' : 'userValue'">
究竟是什么不起作用？你有任何错误吗？还是 CSS 类附加不起作用？
验证不起作用，有空白字段，点击保存请求将在没有任何验证的情况下发送到服务器。谢谢我通过使用 Jquery 和 javascript 解决了它

【解决方案2】：

谢谢大家的回答和cmets。我需要提供代码，所以使用 Jquery 和 Javascript 来验证：请在下面找到代码：

submitHandler : function(form) {
            let invalid = 0
            $(  ".userValue" ).removeClass( "has-error" )
            $( ".userValue" ).each(function() {

              if($( this ).val() == "" ) {
                invalid++
                $( this ).addClass( "has-error" );
              }
            });
            if(invalid == 0){
                //some logic
                form.submit();
            } 
        }

【讨论】：