0

我在 Bootstrap 页面上坚持使用 jQuery 验证。我使用 jQuery 验证器将我的字段绑定在 Bootstrap 样式的页面上，并将其设置onfocusout为 true，以便获得即时反馈。但我收到一个 javascript 错误：

Uncaught TypeError: undefined is not a function jquery.validate.min.js:2
e jquery.validate.min.js:2
(anonymous function) jquery.validate.min.js:2
m.event.dispatch jquery-1.11.1.min.js:3
r.handle jquery-1.11.1.min.js:3
m.event.trigger jquery-1.11.1.min.js:3
m.event.simulate jquery-1.11.1.min.js:3
c jquery-1.11.1.min.js:3

HTML

<div class=container-fluid>
    <form id=withdraw_form class=form-horizontal role=form>
        <div class="wf-section account-details">
            <h4 class=title>Details</h4>
            <div class="form-group">
                <label class="col-xs-5 col-md-4 control-label ">Amount</label>
                <div class="col-xs-4 col-md-5 remove-side-paddings">
                    <input type=text class="form-control" id=amount name=amount />
                </div>
                <div class="col-xs-2 col-md-2 " style="padding-left: 5px;"><span>eg. 99.99</span></div>
            </div>
        </div>

        <div class="wf-section delivery-address">
            <h4 class=title>Contact</h4>
            <div class="form-group">
                <label class="col-xs-5 col-md-4 control-label ">Phone</label>
                <div class="col-xs-4 col-md-5 remove-side-paddings">
                    <input type=text class="form-control" id=phone name=phone />
                </div>
            </div>
        </div>

        <div class="action-area">
            <input type=submit id=withdraw class="btn btn-primary" value="Submit">
            <input type=button id=cancel class="btn btn-primary" value="Cancel">
        </div>
    </form>
</div>

JavaScript

$(function() {
    $('#withdraw_form').validate({
        onfocusout: true,
        onkeyup: false,
        onclick: false,
        errorElement: 'div',
        errorClass: 'help-block',
        rules: {
            amount: {
                required: true,
                number: true
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },
        messages: {
            amount: {
                required: "Please enter a valid amount",
                number: "Please enter a valid number"
            },
            phone: {
                required: "Please enter a valid phone number",
                phoneUS: "Not a valid US phone nmber!"
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('success').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });
});

请在此处找到非工作示例。

另一个奇怪的事情是（比如说我设置onfocusout为 false），直接提交一个或多个但所有字段无效，它不会抛出错误。表单提交成功。

实际上错误是在jQuery中引发的。我尝试使用文件的未缩小版本，但找不到任何有用的东西。

请帮助我理解我做错了什么。非常感谢您的帮助。

谢谢 Vivek Ragunathan

4

2 回答 2

1

引用操作：

“我已将其设置onfocusout为true以便获得即时反馈。但我收到一个 javascript 错误：” ...

... “另一个奇怪的事情是（比如说我将onfocusout设置为false），并直接提交一个或多个但所有字段无效，它不会抛出错误。表单提交成功。”

true不是此选项的有效值，并且如您所见，在某些情况下可能会破坏插件。 onfocusout已经是默认行为，因此只需将此选项排除在外。 仅onfocusout当您想停用它 ( false) 或使用覆盖功能时才设置。

请参阅文档：http: //jqueryvalidation.org/validate/#onfocusout

onfocusout
类型：Boolean 或 Function(
) 在模糊时验证元素（复选框/单选按钮除外）。如果未输入任何内容，则跳过所有规则，除非该字段已被标记为无效。设置为 Function 以自行决定何时运行验证。

布尔值 true 不是有效值。

默认情况下，onfocusout在提交按钮第一次触发整个表单的验证之前，什么都不做。如果你想onfocusout立即工作，那么用这样的东西覆盖这个功能......

onfocusout: function (element) {
    this.element(element);
}

或保留默认行为以忽略radio和checkbox元素...

onfocusout: function (element) {
    if (!this.checkable(element)) {
        this.element(element);
    }
}

这意味着要保持“默认”行为，根本无法声明onfocusout该选项。

这是您仅有的三个选择...

  • 默认行为 -> 你不能设置它true。只需忽略该onfocusout选项。

  • 禁用“模糊”验证 -> 设置onfocusout为false.

  • 覆盖模糊验证 -> 设置onfocusout为函数。

于 2014-07-04T14:52:10.303 回答
0

我想我成功了。我只是愚蠢地没有看到验证器 phoneUS（在验证器设置中使用）是附加方法脚本文件的一部分，而不是在 jQuery验证本身中。它现在似乎工作了。

谢谢 Vivek Ragunathan

于 2014-07-03T23:18:14.133 回答