将css类添加到输入标签thymeleaf + spring答案

【问题标题】：Adding css class to input tag thymleaf + spring将css类添加到输入标签thymeleaf + spring
【发布时间】：2020-04-13 01:07:53
【问题描述】：

我是 spring + thymleaf 的新手，我已经实现了一个带有验证的表单，一切正常，但如果表单字段为空或 null，我必须将字段设置为红色。这是我做不到的。请在下面找到代码：类名和id被重命名

我的班级：

    public class Comp implements Serializable {

        private static final long serialVersionUID = 1L;

        @JsonProperty("name")
        @NotNull
        @NotBlank
        private String name;

        @JsonProperty("accId")
        @NotNull
        @NotBlank
        private String accId;
    }

我的控制器方法：

    @RequestMapping(value = "/companyAccountHtml", method = RequestMethod.GET) 
        public String companyAccount(HttpServletRequest request, Model model) {

            model.addAttribute("companyAccess", new CompanyAccess());
            return "addcompanyaccount";
        }

        @RequestMapping(value = "/addCompanyAccount", method = RequestMethod.POST) 
        public String addCompanyAccount(@Valid CompanyAccess companyAccess, BindingResult result,
                HttpServletRequest request, Model model) {
            if(result.hasErrors()){
                return "addcompanyaccount";
            }

            return "redirect:/cred";
        }

HTML：

    <form id="comp" name="comp" action="#" th:action="@{/addCompanyAccount/}" 
                th:object="${companyAccess}" method="post" >
          <div class="c" style="margin-left: auto; margin-right: auto; float: none;">
            <p class="hed">Add Company Account</p>

            <label for="ad">Name*</label>
            <input type="text" th:field="*{name}" name="name" maxlength="40" 
             th:classappend="${#fields.hasErrors('name')}? has-error : ">

            <label for="acc">Id*</label>
            <input type="text" th:field="*{accId}" name="accId" maxlength="12" 
            th:classappend="${#fields.hasErrors('accId')}? has-error : ">
          </div>
          <div class="clear"></div>

          <div class="vltl_button-wrapper">
            <input type="submit" id="submitBtn" class="ccc" value="  Save  "></button>
            <input type="button" class="ccc" value="Cancel" onClick="document.location.href='../cred'">

          </div>
          </form>

CSS

    .has-error{
        border:1px solid red!important;
    }

在带有input 标记的th:classappend="${#fields.hasErrors('name')}? has-error : " 中出现错误。如果我使用p 标记，输入文本的红线会下降，如果字段为空白或空，我希望输入框为红色。我尝试了th:if，它也没有填充仅在显示错误时才提交的文本。请让我知道如何进行。输入标签上已经有很多 CSS 返回谢谢。

【问题讨论】：

标签： html css spring spring-boot thymeleaf

【解决方案1】：

您需要将false 条件添加到您的th:classappend 表达式中。例如在名称字段上：

<input type="text" th:field="*{name}" name="name" maxlength="40" 
         th:classappend="${#fields.hasErrors('name')}? has-error : ''">

注意th:classappend 中: 后面的空单引号字符串。您当前拥有的是无效的三元表达式。如果你在 Java 中使用三元组，它会是：

int x = booleanCondition ? 1 : ;    // Error because the right side doesn't have a value

同样的概念在这里也适用。

【讨论】：