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