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!" });

正如您从第一个代码块中看到的那样，我尝试在验证脚本的消息区域下添加它，现在当页面加载时会显示growl消息，然后当您提交表单进行验证时，它只显示正常情况下字段下方的错误消息。

另外，如何在密钥启动时运行验证脚本而不是提交？

更新

根据请求，这里是表格

<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 DEMO ：http://jsfiddle.net/FhsTg/（已损坏）

工作演示：http://jsfiddle.net/FhsTg/1/

As per documentation：

onkeyup

类型：布尔值或函数（）

验证密钥上的元素。只要该字段未标记为无效，就不会发生任何事情。否则，将在每个按键事件上检查所有规则。

- 设置为false以禁用。
- 设置为功能以自行决定何时运行验证。< br /> - 布尔值true不是有效值。

使用JGrowl和jQuery验证错误消息

2 个答案: