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

Posted 2023-02-26

【中文标题】将css类添加到输入标签thymeleaf + spring

【英文标题】：Adding css class to input tag thymleaf + 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 返回 谢谢。

【参考方案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

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