Question

这个很奇怪。所以我在我使用Backbone.js和jQuery Mobile的网站上实现了jQuery验证。在一种形式上，验证与默认情况非常相似，您可以在输入字段下看到红色文本（我必须更改位置，以便文本不在字段内）。

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

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

如果有人可以看看这个我会很感激。这是一个演示网站，您可以在其中看到问题

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

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

用户名：public

密码：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>

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

Answer 1

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

然而，关键问题......

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

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

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

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

JQuery Validator在所有表单字段

1 个答案: