CODEWITHSUNDEEP
jqueryhtmljquery-validatethymeleafspring-el
SKC...
SKC...

Reputation: 223

Thymeleaf and JQuery

I am new to thymeleaf. I want to integrate thymeleaf and JQuery for Clint Side Validation. Here is the code. Please have a look on this code. Where is the error and how to solve this. My JQuery file is unable to read form the location . 

 <html xmlns:th="http://www.thymeleaf.org">
 <head>
 <script src="http://code.jquery.com/jquery-1.10.2.js">

 </script>
 <script>
    $(document).ready(function() {      
        alert("Hi");
        $("#firstname").blur(function() {
            var un=$("#firstname").val();
            if($(this).val() == ''){
                $("#p").text("First Name is Mandatory").css("color","red");
                 $('#firstname').focus();
            }else{
                $("#p").text("");
            }
        });
        $("#lastname").blur(function() {
            var un=$("#lastname").val();
            if($(this).val() == ''){
                $("#q").text("Last Name is Mandatory").css("color","red");
                 $('#lastname').focus();
            }else{
                $("#q").text("")
            }
        });
        $("#sex").blur(function() {
            var un=$("#sex").val();
            if($(this).val() == ''){
                $("#r").text("Must choose one of them").css("color","red");
                 $('#sex').focus();
            }else{
                $("#r").text("")
            }
        });
        $("#company").blur(function() {
            var un=$("#company").val();
            if($(this).val() == ''){
                $("#s").text("Must choose one of the Company name").css("color","red");
                 $('#company').focus();
            }else{
                $("#s").text("")
            }
        });
    });
  </script>

  <style>
  .fieldError {
    color: red;
    background-color: #EB9AC5;
}

.field {
    color: #ff0000;
}

  .errorblock {
    color: #000;
    background-color: #ffEEEE;
    border: 1px solid #ff0000;
    padding: 8px;
    margin: 16px;
    width: 150px;
    height: 30px;
    }
  </style>

  </head>
  <body>
        <h2>This is a Thymeleaf template</h2>
    <form action="#" th:object="${USER}" th:action="@{/my}">
        <fieldset>
            <div>
                <th th:text="#{enter.firstname}" /> <input type="text"
                    th:field="*{firstname}" th:errorclass="fieldError" id="firstname"/> <font
                    color="red">
                    <th th:if="${#fields.hasErrors('firstname')}">
                <th th:field="*{firstname}" th:errors="${USER.firstname}"
                    th:text="#{firstname.required}" class="errorblock" />
                    </th>
                </font>
                <div id="p"/>
            </div>

            <div>
                <th th:text="#{enter.lastname}">Hello</th> <input type="text"
                    th:field="*{lastname}" th:errorclass="fieldError" id="lastname"/> <font
                    color="red"> 
                    <p th:if="${#fields.hasErrors('lastname')}" th:errors="*{lastname}">Incorrect
                        Choose</p>
                </font>
                <div id="q"/>
            </div>
            <div>
                <th th:text="#{enter.sex}" /> <input type="radio" th:field="*{sex}"
                    th:value="Male" th:errorclass="fieldError" id="sex"/>Male <input
                    type="radio" th:field="*{sex}" th:value="Female"
                    th:errorclass="fieldError" />Female
                 <font color="red">
                    <th th:if="${#fields.hasErrors('sex')}">
                <th th:field="*{sex}" th:errors="${USER.sex}"
                    th:text="#{sex.required}" />
                    </th>
                </font> 
                    <div id="r"/>
            </div>

            <div>
                <th th:text="#{enter.company}" /> <select th:field="*{company}"
                    th:errorclass="fieldError" id="company">
                    <option th:value="Symphony" th:text="#{enter.company1}" />
                    <option th:value="TCS" th:text="#{enter.company2}" />
                    <option th:value="VMWare" th:text="#{enter.company3}" />
                </select> <font color="red">
                    <th th:if="${#fields.hasErrors('company')}">
                <th th:field="*{company}" th:errors="${USER.company}"
                    th:text="#{comapny.required}" />
                    </th>
                </font>
                <div id="s"/>
            </div>

            <div>
                <button type="submit">Subscribe me!</button>
            </div>

        </fieldset>

    </form>

</body>



</html>

Upvotes: 1

Views: 17910

Answers (2)

CanCoder
CanCoder

Reputation: 1150

I have few suggestions that can help resolve why the JQuery code is not been called.

Put the <script src="http://code.jquery.com/jquery-1.10.2.js"></script> at the last line before the closing body tag and/or before any jquery based libraries that may require the use of jQuery library. This is become the jquery should be loading last after html codes are done loading.

Check this part. This seems to me as unwanted repetition and use only of the line of code below:

   var un=$("#sex").val();  //this line is the same as $(this).val()
   if($(this).val() == ''){  ....

Hope this help someone looking for similar solutions

Upvotes: 1

Iwo Kucharski
Iwo Kucharski

Reputation: 3825

Client side validation isn't a good idea. JavaScript can be disabled in browser and validation won't work. Read about field errors. When form is submitted, controller method can check if form is @Valid and you have all errors in BindingResult. You can make something like:

@RequestMapping(value="/my", method = "POST")
    public String postForm(final @Valid MyForm form, final BindingResult bindingResult, final ModelMap model) {
        if (bindingResult.hasErrors()) {
            return "my";
        }
        model.clear();
        return "redirect:/success";
    }

Upvotes: 1

Related Questions