JQuery Validator 关闭所有表单字段的工具提示

Posted 2023-05-09

【中文标题】JQuery Validator 关闭所有表单字段的工具提示

【英文标题】：JQuery Validator turn OFF tooltips on all form fields

【发布时间】：2016-07-08 11:12:12

【问题描述】：

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

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

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

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

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

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

用户名：公开

密码：99382lVAB8

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

---

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

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

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

然后标准主干路由接管，直到您单击注册页面链接。这是 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>

在清理这个帖子的过程中，我意识到我正在做一些非常愚蠢的事情。就像在表单中有一个表单一样，很确定这是个坏主意。

【问题讨论】：

向我们展示代码...请不要指望我们挖掘您的现场演示站点。此外，一旦您取消演示，此问题对其他人将变得毫无用处。

工具提示不是来自 jQuery Validate...它是浏览器的内置 HTML5 验证。换句话说，您没有安装、初始化或正确设置 jQuery Validate 插件……没有看到相关代码，就无法知道哪里出错了。否则，请显示此表单的相关 HTML 标记以及您对 .validate() 方法的调用。

所有的优点，我已经去更新了原来的帖子，希望它对你和其他人更有用。

仅供参考：$('#main-content').enhanceWithin()，您使用的方法已弃用。

【参考方案1】：

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

但是，关键问题...

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

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

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

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

【讨论】：

和往常一样，答案是……我要老了。谢谢你，先生。