我不熟悉百里香。我想将百里香叶和JQuery集成到Clint边验证中。这是代码。请看一下这段代码。错误在哪里以及如何解决这个问题。我的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>
客户端验证不是一个好主意。可以在浏览器中禁用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";
}
我有一些建议可以帮助解决为什么未调用JQuery代码的问题。
将<script src="http://code.jquery.com/jquery-1.10.2.js"></script>放在closing body tag之前和/或可能需要使用jQuery库的任何基于jquery的库之前的最后一行。这已成为html代码加载完成后最后应该加载的jQuery。
检查此部分。在我看来，这似乎是不必要的重复，仅使用下面的代码行：
var un=$("#sex").val(); //this line is the same as $(this).val()
if($(this).val() == ''){ ....
希望这对寻求类似解决方案的人有所帮助