Thymeleaf和JQuery_Jquery_Html_Jquery Validate_Thymeleaf_Spring El

Thymeleaf和JQuery

jquery html

Thymeleaf和JQuery,jquery,html,jquery-validate,thymeleaf,spring-el,Jquery,Html,Jquery Validate,Thymeleaf,Spring El,我是新来的。我想集成thymeleaf和JQuery进行Clint端验证。这是代码。请看一下这个代码。错误在哪里以及如何解决。我的JQuery文件无法从该位置读取表单 <html xmlns:th="http://www.thymeleaf.org"> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"> </script> <script> $(

我是新来的。我想集成thymeleaf和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>

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


$（文档）.ready（函数（）{
警报（“Hi”）；
$（“#firstname”）.blur（函数（）{
var un=$（“#firstname”）.val（）；
if（$（this.val（）=''）{
$（“#p”）.text（“必须使用名字”）.css（“颜色”、“红色”）；
$（“#firstname”）.focus（）；
}否则{
$（“#p”）。正文（“”）；
}
});
$（“#lastname”）.blur（函数（）{
var un=$（“#lastname”）.val（）；
if（$（this.val（）=''）{
$（“#q”）.text（“必须输入姓氏”）.css（“颜色”、“红色”）；
$（'#lastname'）.focus（）；
}否则{
$（“#q”）.text（“”）
}
});
$（“#sex”）.blur（函数（）{
var un=$（“#sex”）.val（）；
if（$（this.val（）=''）{
$（“#r”）.text（“必须选择其中一个”）.css（“颜色”、“红色”）；
$（'sex'）.focus（）；
}否则{
$（“#r”）.text（“”）
}
});
$（“#公司”）.blur（函数（）{
var un=$（“#公司”）.val（）；
if（$（this.val（）=''）{
$（“#s”）.text（“必须选择一个公司名称”）.css（“颜色”、“红色”）；
$（“#公司”）.focus（）；
}否则{
$（“#s”）.text（“”）
}
});
});
.字段错误{
颜色：红色；
背景色：#EB9AC5；
}
.场{
颜色：#ff0000；
}
.errorblock{
颜色：#000；
背景色：#ffEEEE；
边框：1px实心#ff0000；
填充：8px；
利润率：16px；
宽度：150px；
高度：30px；
}
这是一个Thymeleaf模板
你好
不正确
选择
 <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，验证将不起作用。了解。提交表单时，控制器方法可以检查表单是否有效，并且您在

BindingResult

中是否有所有错误。您可以制作如下内容：

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

@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代码

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

将

放在

结束正文标记之前的最后一行和/或任何可能需要使用jquery库的基于jquery的库之前。这就是jquery应该在html代码加载完成后最后加载的地方
 <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>

检查这部分。在我看来，这似乎是不必要的重复，只是使用了下面的代码行：
 <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>

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

希望这有助于寻找类似解决方案的人
小提琴会更好..我没有得到Bhavik。你能详细说明一下吗？这与Spring EL有什么关系？在Thymeleaf中，我们可以编写Spring EL（如ThymleLeaf=HTML5+Spring EL）。kockoTo说得更正确：客户端验证可能是个好主意，但前提是您也要进行独立的服务器端验证。坏的部分只有在您专门进行客户端验证的情况下才会出现。@Iwo kucharski您的回答没有回答这个问题：为什么jquery代码有错，为什么没有调用它？@leeCoder感谢您在消息编写6年后指出它；）老实说，我不再使用Thymeleaf，但我要做的第一件事是将所有脚本代码放入/**/中。如果2020年还有人使用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>