Adding css class to input tag thymleaf + spring

Question

I am new to spring + thymleaf, I have implemented a form with validation all are working fine but if form field is empty or null, I have to make the filed red. which I am not able to do. please find the code below: class name and id are renamed

My Class:

    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;
    }

My Controller method:

    @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;
    }

Getting error in th:classappend="${#fields.hasErrors('name')}? has-error : " with the input tag. If I make a use of p tag the red line is coming down of input text, I want the input box will be red if fields are blank or null. I tried th:if also which is not populating the text filed itself only on error it shows. Please let me know how to proceed. Already a lot of CSS return on input tag Thank you.

Answer 1

You need to add the false condition to your th:classappend expression. For example on the name field:

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

Note the empty single-quoted string after : in the th:classappend. What you have currently is an invalid ternary expression. If you used a ternary in Java it would be:

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

The same concept applies here.