JQuery 验证器关闭所有表单字段上的工具提示

Question

这个很奇怪。因此，我在同时使用 Backbone.js 和 jQuery 移动设备的网站上实施了 jQuery 验证。在一种形式上，验证的工作方式与默认情况非常相似，您会在输入字段下方看到红色文本（我必须更改位置，因此文本不在字段内）。

由于某种原因，在另一页上错误消息的显示方式不同。它们看起来像工具提示。

我在这里看到很多关于如何使用工具提示进行验证的 post，但这不是我想要的。我只想要标准的普通红色文本。

如果有人可以看一下，我将不胜感激。这是一个演示站点，您可以在其中看到问题

http://demo.velexo.com/m2/

在该页面上，如果您导航到注册页面并单击提交而不填写任何内容，您将看到我想要的外观。然后返回登录页面并使用这些凭据登录（不要担心这是一个演示站点）

用户名：public

密码：99382lVAB8

在此页面上，单击“保险信息”，然后单击“提交”。它将在第一个输入字段上显示工具提示。

好的..抱歉，我认为最好有一个活生生的例子，但你是对的，（我下次会做对的）。这是相关代码：

首先，有一个函数可以设置我的 backbone 路由器，在那个函数的末尾我放了这个：

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().parent().after());
    }
});

然后标准 backbone 路由接管，直到您单击注册页面 link。这是 registerApp 页面的精简版，应该只显示相关内容：

var registerApp = function() {
    var app = {};

    app.Register = Backbone.Model.extend({
        url: api_url + '/m2/api/register',
    });

    app.RegisterMainView = Backbone.View.extend({
        template: _.template($('#register-main-template').html()),
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    app.AppView = Backbone.View.extend({
        el: '#registerapp',
        initialize: function () {
            var register = new app.Register(regSteps);
            var view = new app.RegisterMainView({model:register});

            $('#main-content').append(view.render().el);
            $('#main-content').trigger('create');
            //$('#insurance-form').validate();

            jQuery.validator.setDefaults({
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }
            });


            $('#insurance-form').validate({
                rules: {
                    policy_provider: { required: true },
                    policy_number: { required: true },
                    start_date: { required: true },
                    end_date: { required: true }
                }
            });

        },
        events: {
            'submit': 'onFormSubmit',
        },
        onFormSubmit: function(e) {
            e.preventDefault();
            console.log('submit form');
        }

    }); 

    app.appView = new app.AppView();
}

最后，这些是使用的模板：

<script type="text/template" id="register">
    <div id="registerapp">
        <div data-role="header">
            <h2 id="logo">&nbsp;</h2>
        </div>
        <div class="ui-content" id="main-content">
        </div>
        <div data-role="footer" class="footerapp">
        </div>
    </div>
</script>

<script type="text/template" id="register-main-template">
    <form action='/m2/api/register/' method='post' id='register-main' class="ui-mobile">
        <div class="ui-body ui-body-a ui-corner-all col">
            <div>
                <div data-role="collapsibleset" id="registration-steps">
                    <div data-role="collapsible" id="insurance">
                        <h3><span>Insurance Information</span><img src="images/<%- ins_icon %>"/></h3>
                        <form action="#" id="payment-forms" id="insurance-form">
                            <span>We just need some basic information about your insurance</span>
                            <div><input name="policy_provider" id="policy_provider" type="text" placeholder="Policy Provider" required/></div>
                            <div><input name="policy_number" id="policy_number" type="text" placeholder="Policy Number" required/></div>
                            <div><input name="start_date" type="text" placeholder="Start Date" required/></div>
                            <div><input name="end_date" type="text" placeholder="End Date" required/></div>
                            <button name="submit_insurance" id="submit_insurance" type="submit" class="ui-btn">Submit Insurance Info</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

在为 post 清理这个的过程中，我意识到我在做一些非常愚蠢的事情。就像在一个表格中有一个表格，这肯定是个坏主意。

Answer 1

工具提示不是来自 jQuery 验证...它是浏览器的内置 HTML5 验证。换句话说，您没有正确初始化 jQuery Validate 插件，因此由于您的标记包含 HTML5 验证属性 required，它将回退到此。（注意：由于您在 .validate() 方法中声明了所有验证规则，因此不需要使用任何 HTML5 验证属性。）

但是，关键问题...

您在同一个 <form> 元素上有两个不同的 id 属性...

<form action="#" id="payment-forms" id="insurance-form">

行为将无法预测，但是第二个 id 属性可能会被忽略，这与您附加到 .validate() 的初始化方法相同 id。

$('#insurance-form').validate({ ....

JQuery 验证器关闭所有表单字段上的工具提示

JQuery Validator turn OFF tooltips on all form fields

jquery

jquery-validate

jquery-mobile

backbone.js