2014-11-10 2 views
0

Im пытается проверить форму для добавления нового пользователя с использованием Spring mvc: P. У меня уже были проверки на стороне сервера, работающие с помощью пользовательских валидаторов Spring. Но проверка на стороне клиента позволяет отправить форму. Это как Im делает это:Почему проверка jquery не работает?

В том числе файлов JavaScript:

<script src="resources/js/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script src="resources/js/jquery.colorbox-min.js" type="text/javascript"></script> 
<script src="resources/js/jquery.validate.min.js" type="text/javascript"></script> 
<script src="resources/js/additional-methods.min.js" type="text/javascript"></script> 

Форма до весны отправить его в браузер:

<c:url value="/AddUser" var="action"/> 
      <form:form method="post" action="${action}" commandName="user" id="adduserform"> 

       <tr> 
        <td><form:label path="username"><spring:message code="user.form.username"/></form:label></td> 
        <td><form:input path="username" maxlength="15"/></td> 
        <td><form:errors path="username"/>${duplicated}</td> 

       </tr> 

       <tr> 
        <td><form:label path="password"><spring:message code="user.form.password"/></form:label></td> 
        <td><form:password path="password" maxlength="20"/></td> 
        <td><form:errors path="password"/>${policyMessage}</td> 
       </tr> 

       <tr> 
        <td><form:label path="confirmPassword"><spring:message 
          code="user.form.password2"/></form:label></td> 
        <td><form:password path="confirmPassword" maxlength="20"/></td> 

       </tr> 
       <tr> 
        <td><form:label path="description"><spring:message 
          code="user.form.description"/></form:label></td> 
        <td><form:input path="description"/></td> 
        <td><form:errors path="description"/></td> 
       </tr> 

       <tr> 
        <td><form:label path="role"><spring:message code="user.form.roles"/></form:label></td> 
        <td><form:select path="role" items="${rolesList}"/></td> 
       </tr> 

       <tr> 
        <td><form:label path="blocked"><spring:message code="user.form.blocked"/></form:label></td> 
        <td><form:checkbox path="blocked" value="false"/></td> 
       </tr> 


       <tr> 
        <td><form:label path="changePasswordAtLogon"><spring:message 
          code="user.form.changePasswordAtLogon"/></form:label></td> 
        <td><form:checkbox path="changePasswordAtLogon" value="false"/></td> 
       </tr> 

       <tr> 
        <td colspan="2"> 
         <input type="submit" name="submit" value="<spring:message 
          code="user.form.submit"/>"/> 
        </td> 
       </tr> 

      </form:form> 
     </table> 
     </form> 

Форма в браузере:

<form id="adduserform" action="/AddUser" method="post"> 

       <tr> 
        <td><label for="username">Username</label></td> 
        <td><input id="username" name="username" type="text" value="" maxlength="15"/></td> 
        <td></td> 

       </tr> 

       <tr> 
        <td><label for="password">Password</label></td> 
        <td><input id="password" name="password" type="password" value="" maxlength="20"/></td> 
        <td></td> 
       </tr> 

       <tr> 
        <td><label for="confirmPassword">Confirm Password</label></td> 
        <td><input id="confirmPassword" name="confirmPassword" type="password" value="" maxlength="20"/></td> 

       </tr> 
       <tr> 
        <td><label for="description">Description</label></td> 
        <td><input id="description" name="description" type="text" value=""/></td> 
        <td></td> 
       </tr> 

       <tr> 
        <td><label for="role">User type</label></td> 
        <td><select id="role" name="role"><option value="ROLE_ADMIN">Administrator</option><option value="ROLE_USER">Normal User</option></select></td> 
       </tr> 

       <tr> 
        <td><label for="blocked">Blocked</label></td> 
        <td><input id="blocked1" name="blocked" type="checkbox" value="true"/><input type="hidden" name="_blocked" value="on"/></td> 
       </tr> 


       <tr> 
        <td><label for="changePasswordAtLogon">Change password at logon</label></td> 
        <td><input id="changePasswordAtLogon1" name="changePasswordAtLogon" type="checkbox" value="true"/><input type="hidden" name="_changePasswordAtLogon" value="on"/></td> 
       </tr> 

       <tr> 
        <td colspan="2"> 
         <input type="submit" name="submit" value="Submit"/> 
        </td> 
       </tr> 

      </form> 

Параметры проверки непосредственно под формой. Я просто тестирую, так что только подтверждение для первого поля:

$(document).ready(function() { 
       $("#adduserform").validate(
         { 
          rules: { 
           username: { 
            required: true 
           } 
          }, 
          messages: { 
           username: { 
            required: "F** working" 
           } 
          } 
         }); 
      }); 
+0

Проверьте консоль на наличие ошибок JavaScript. Если ваш плохой HTML не является проблемой, ничто в коде JavaScript, который вы нам показали, может быть нарушением этого плагина. – Sparky

ответ

0

Ваш HTML является недействительным, следовательно, ваш form является недействительным.

<form id="adduserform" action="/AddUser" method="post"> 
    <tr> 
     .... 

Вы не можете, возможно, имеют <form> тег в качестве родителя <tr> элемента. Только <table>, <thead>, <tbody> или <tfoot> Элементы могут быть родителями <tr> элементов.

См: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

ПРИМЕЧАНИЕ: Это плохая разметка вероятно не корневой проблемы, как ваш точный код работает в моем jsFiddle. Тем не менее, я тестировал это только в одном браузере и до тех пор, пока вы не исправили недействительный HTML, ваши результаты могут быть не совместимы с кросс-браузером.

DEMO: http://jsfiddle.net/dby055z9/

+0

Теперь он работает, таблица выше tr исправлена ​​проверка jQuery.BTW Im, использующая хром 38 на утопических 64 битах. –

0

Должно быть выполнено. Убедитесь, что вы указали правильный путь jquery.validate.min.js.
См. Это jsfiddle. Протестировано с использованием jquery 1.8.3. Для конкретного примера вы можете обратиться к here.

$(document).ready(function() { 
     $("#adduserform").validate(
       { 
        rules: { 
         username: "required" 
        }, 
        messages: { 
         username: "Please enter username!" 
        } 
       }); 
    }); 
Смежные вопросы