title: Thymeleaf and JQuery
body: <p>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 .                                              </p>
  
  <p></p>
  
  <pre><code> &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
   &lt;head&gt;
   &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;
  
   &lt;/script&gt;
   &lt;script&gt;
      $(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("")
              }
          });
      });
    &lt;/script&gt;
  
    &lt;style&gt;
    .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;
      }
    &lt;/style&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
          &lt;h2&gt;This is a Thymeleaf template&lt;/h2&gt;
      &lt;form action="#" th:object="${USER}" th:action="@{/my}"&gt;
          &lt;fieldset&gt;
              &lt;div&gt;
                  &lt;th th:text="#{enter.firstname}" /&gt; &lt;input type="text"
                      th:field="*{firstname}" th:errorclass="fieldError" id="firstname"/&gt; &lt;font
                      color="red"&gt;
                      &lt;th th:if="${#fields.hasErrors('firstname')}"&gt;
                  &lt;th th:field="*{firstname}" th:errors="${USER.firstname}"
                      th:text="#{firstname.required}" class="errorblock" /&gt;
                      &lt;/th&gt;
                  &lt;/font&gt;
                  &lt;div id="p"/&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;th th:text="#{enter.lastname}"&gt;Hello&lt;/th&gt; &lt;input type="text"
                      th:field="*{lastname}" th:errorclass="fieldError" id="lastname"/&gt; &lt;font
                      color="red"&gt; 
                      &lt;p th:if="${#fields.hasErrors('lastname')}" th:errors="*{lastname}"&gt;Incorrect
                          Choose&lt;/p&gt;
                  &lt;/font&gt;
                  &lt;div id="q"/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;th th:text="#{enter.sex}" /&gt; &lt;input type="radio" th:field="*{sex}"
                      th:value="Male" th:errorclass="fieldError" id="sex"/&gt;Male &lt;input
                      type="radio" th:field="*{sex}" th:value="Female"
                      th:errorclass="fieldError" /&gt;Female
                   &lt;font color="red"&gt;
                      &lt;th th:if="${#fields.hasErrors('sex')}"&gt;
                  &lt;th th:field="*{sex}" th:errors="${USER.sex}"
                      th:text="#{sex.required}" /&gt;
                      &lt;/th&gt;
                  &lt;/font&gt; 
                      &lt;div id="r"/&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;th th:text="#{enter.company}" /&gt; &lt;select th:field="*{company}"
                      th:errorclass="fieldError" id="company"&gt;
                      &lt;option th:value="Symphony" th:text="#{enter.company1}" /&gt;
                      &lt;option th:value="TCS" th:text="#{enter.company2}" /&gt;
                      &lt;option th:value="VMWare" th:text="#{enter.company3}" /&gt;
                  &lt;/select&gt; &lt;font color="red"&gt;
                      &lt;th th:if="${#fields.hasErrors('company')}"&gt;
                  &lt;th th:field="*{company}" th:errors="${USER.company}"
                      th:text="#{comapny.required}" /&gt;
                      &lt;/th&gt;
                  &lt;/font&gt;
                  &lt;div id="s"/&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;button type="submit"&gt;Subscribe me!&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/fieldset&gt;
  
      &lt;/form&gt;
  
  &lt;/body&gt;
  
  
  
  &lt;/html&gt;
  </code></pre>