2013-12-09 3 views
-1

Я изо всех сил пытаюсь настроить проверку jquery весь день и задавался вопросом. Если бы я мог получить некоторую помощь.JQuery custom validation (errorClass, errorElement и errorPlacement)

Я использую yaml.css в качестве рамки css. Таким образом, что YAML работает для форм является то, что исходная форма выглядит так ...

<form id="loginForm" name="loginForm" class="ym-form" action="/ReportingManager/j_spring_security_check" method="post">        
    <div class="ym-fbox"> 
     <label for="j_username">Username<sup class="ym-required">*</sup></label> 
     <input id="j_username" name="j_username" placeholder="enter a value" class="{required:true}" type="text" value="" maxlength="30"/> 
    </div>  
    <input id="loginBtn" type="submit" class="ym-button ym-primary" value="Log in" title="Log in" />      
</form> 

После отправки формы с ошибками, мне нужно сделать 2 вещи ....

1-Добавляем следующий чуть ниже поля ввода (внутри ут-Функциональный блок DIV) ...

<p class="ym-message"> jquery error message here </p>

2-Изменение родительского DIV, который окружает мой входной элемент формы ошибочными добавить класс с именем YM-ошибка ..

от ...

<div class="ym-fbox"> 

к ...

<div class="ym-fbox ym-error"> 

Я был колеблющимся, чтобы после того, что я пробовал, потому что он не работает, но только, чтобы показать, что я сделал попытку этого это то, что я пробовал до сих пор ...

$().ready(function() { 
    $("form").validate({ 
     ... 
    errorClass:'ym-error', 
    errorElement: 'p', 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
     }, 
     highlight: function (element, errorClass, validClass) { 
      $(element).parents("div").addClass(errorClass); 
     },  
     unhighlight: function (element, errorClass, validClass) { 
      $(element).parents("div").removeClass(errorClass); 
     }, 

Это не хорошо. Может ли кто-нибудь помочь мне примерно так, как должен выглядеть метод проверки формы?

благодаря

+0

кажется отлично http://jsfiddle.net/arunpjohny/WZvTx/2/... вместо 'parents()' use '.closest()' –

+0

ваша модификация моего оригинала прекрасно работала с небольшим количеством настроек. Спасибо. – Richie

+0

Что означает «нехорошо»? – Sparky

ответ

0

В пользу других ... Я решил эту проблему с помощью Arun ....

$().ready(function() { 
    $("form").validate({ 
     onblur: false, 
     onchange: false, 
     onkeyup: false, 
     onsubmit: true, 
     submitHandler: function(form) { 
      $(form).removeClass('dirty'); 
      $('button').attr('disabled','disabled'); 
      $('button').addClass('disabled'); 
      form.submit(); 
     }, 
     errorClass:'ym-message', 
     errorElement: 'p', 
     errorPlacement: function(error, element) { 
      error.insertAfter(element); 
     }, 
     highlight: function (element, errorClass, validClass) { 
      $(element).closest("div").addClass("ym-error"); 
     },  
     unhighlight: function (element, errorClass, validClass) { 
      $(element).closest("div").removeClass("ym-error"); 
     },  
     ignore: ".ignore" 
    }); 
}); 
+0

Что именно вы решили? – Sparky

+0

FYI- [прочитать документацию] (http://jqueryvalidation.org/validate). 'onsubmit: true' недопустим. Поскольку это состояние по умолчанию, вы нарушите эту функцию. Используйте только «false» или функцию «overriding». В противном случае просто оставьте эту опцию. – Sparky

+0

спасибо Спарки. Используя этот код, он по крайней мере добавил классы и показал сообщения об ошибках, которые я хотел. Но я прочитаю doco и изменю onsubmit. Приветствия за этот совет – Richie

Смежные вопросы