百里香和JQuery

我是新鮮的百里香。我想整合thymeleaf和JQuery進行Clint Side Validation。這是代碼。請看看這段代碼。錯誤在哪裏以及如何解決這個問題。我的JQuery文件無法從該位置讀取。百里香和JQuery

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

來源

2014-01-10 SKC...

提琴會比較好.. – Bhavik

我沒有得到Bhavik。你可以詳細說明一下嗎？ –

這與Spring EL有關係嗎？ –

客戶端驗證是不是一個好主意。 JavaScript可以在瀏覽器中禁用，並且驗證將不起作用。閱讀關於field errors。表單提交時，控制器方法可以檢查表單是否爲@Valid，並且您在BindingResult中有全部錯誤。你可以是這樣的：

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

來源

2014-02-20 23:00:17

爲了更加正確：客戶端驗證可以是一個好主意 - 但前提是您也要進行獨立的服務器端驗證。不好的部分只有當你有專門的客戶端驗證。 –

百里香和JQuery

回答

相關問題