0

我正在使用 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!" });

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

另外，您如何让验证脚本在键上而不是在提交时运行？

更新

根据要求，这里是表格

<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>
4

2 回答 2

1

message是您要显示的字符串。您可以使用showErrors. 将此添加到您的validate({})通话中：

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

这将提醒每个将字段名作为标题发送的错误。您应该可以从那里进行自定义。

于 2013-09-17T20:46:43.543 回答
0

引用操作：

“另外，你如何让验证脚本在 key up 时而不是在 submit 时运行？”

删除这一行：

onkeyup: true

为什么？因为这已经是默认行为，将其设置为true会破坏它。

onkeyup:true演示： http: //jsfiddle.net/FhsTg/（坏了）

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

根据文档：

onkeyup

类型：Boolean 或 Function()

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

- 设置false为禁用。
- 设置为一个函数来自己决定何时运行验证。
-布尔值true不是有效值。

于 2013-09-17T22:00:45.750 回答