Тимелиф и JQuery

0

Я новичок в тимелеафе. Я хочу интегрировать тимелеаф и 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>
  • 0
    скрипка была бы лучше ..
  • 0
    Я не получил Бхавик. Не могли бы вы уточнить?
Показать ещё 2 комментария
Теги:
spring-el
thymeleaf
jquery-validate

1 ответ

1
Лучший ответ

Валидация стороны клиента не является хорошей идеей. JavaScript может быть отключен в браузере, и проверка не будет работать. Читайте о полевых ошибках. Когда форма отправлена, метод контроллера может проверить, является ли форма @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";
    }
  • 6
    Чтобы быть более правильным: проверка на стороне клиента может быть хорошей идеей - но только если вы выполняете независимую проверку на стороне сервера. Плохая часть, только если у вас есть проверка на стороне клиента исключительно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню