Использование JGrowl с сообщениями об ошибках JQuery Validate

Question

Я использую JQuery Validate (http://jqueryvalidation.org/) для моей проверки на стороне клиента

<script type="text/javascript"> 
     $().ready(function() { 
      //validate the inquiry form on keyup and submit 
      $("#inquiryForm").validate({ 
       onkeyup: true, 
       rules: { 
        fullName: { 
         required: true 
        }, 
        email: { 
         required: true, 
         email: true 
        }, 
        inquiry: { 
         required: true, 
         minlength: 5, 
         maxlength: 500 
        } 
       }, 
       messages: { 
        fullName: $.growl({ title: "Growl", message: "Your name is required!" }); 
       } 
      }) 
     }) 

</script> 

(я использую на стороне сервера, а также, но из-за характера этого вопроса не включено здесь.)

Это сообщение по умолчанию показывает сообщение об ошибке под полем ввода. Я хочу использовать jquery Growl (http://ksylvest.github.io/jquery-growl/) для сообщений об ошибках. Я хочу, чтобы каждое сообщение об ошибке сообщалось каждому человеку.

JQuery Growl выглядит следующим образом:

$.growl({ title: "Growl", message: "The kitten is awake!" }); 

Как вы можете видеть из первого блока кода, который я пытался добавить его под областью сообщений скрипта проверки и теперь сообщение рык появляется, когда страница а затем, когда вы отправляете форму для проверки, она просто отображает сообщение об ошибке под полем, как обычно.

Кроме того, как бы у вас был скрипт проверки подлинности на клавишном, а не на submit?

UPDATE

на основе запросов здесь форма

<form class="form-horizontal" id="inquiryForm"> 
    <div class="control-group"> 
    <label class="control-label" for="inputname">Your Name:</label> 
    <div class="controls"> 
     <input type="text" name="fullName" id="inputname" placeholder="First and Last"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputemail">Your Email:</label> 
    <div class="controls"> 
     <input type="text" name="email" id="inputemail" placeholder="Email"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputinquiry">Your Inquiry:</label> 
    <div class="controls"> 
     <textarea name="inquiry" id="inputquiry" placeholder="Your Inquiry"></textarea> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <button type="submit" id="inquiryFormSubmit" class="btn btn-success pull-right">Send</button> 
    </div> 
    </div> 
</form> 

Answer 1

message является строка, которую вы хотите отобразить. Вы можете обрабатывать альтернативные презентации с помощью showErrors. Добавьте это в validate({}) вызова:

showErrors: function(errorMap, errorList) { 
    for (var error in errorMap) { 
     $.growl({title: error, message: errorMap[error]}); 
    } 
} 

Это предупредит каждую ошибку, посылающий имя_поля в качестве названия. Вы должны быть в состоянии настроить оттуда.

Answer 2

Цитата OP:

«Кроме того, как бы вы иметь сценарий проверки работы на ключе вверх, а не на представить?»

Удалить эту строку:

onkeyup: true 

Почему? Потому что это уже поведение по умолчанию и setting it to true will break it.

onkeyup:true ДЕМО: http://jsfiddle.net/FhsTg/ (пунктирная)

Рабочая ДЕМО: http://jsfiddle.net/FhsTg/1/

---

As per documentation:

OnKeyUp

Тип: Логическое или Функция()

Подтвердить элементы при включении.Пока поле не помечено как недействительное, ничего не происходит. В противном случае все правила проверяются на каждом событии ключа.

- установить на false отключить.
- Установите функцию, чтобы решить, когда нужно выполнить проверку.
- A boolean true недействительное значение.