2

使用 jQuery 非侵入式验证插件动态解析要验证的 html 时，不会显示验证消息。Js fiddle显示问题如下

提琴手

http://jsfiddle.net/R92Yn/2/

render: function () {
    var tmpl = _.template(this.template);
    $.validator.unobtrusive.parse(tmpl);
    this.$el.html(tmpl);
    return this;
},
validateForm: function () {
    //$(this.$el).validate();
}

我试图在单击验证按钮时显示需要 usernaem 的错误消息。但是什么也没有发生，在你模糊之后，控制台中也可以看到一个 js 错误。那么我如何使验证与 Backbone.js 视图一起工作

4

1 回答 1

5

jQuery 不显眼的验证插件（最初是为 ASP.Net MVC3 构建的）要求将您input的 s 放置在form元素内。所以如果没有form插件将无法工作。

因此，修改您的模板以包含一个表单：

<script type="text/template" id="loginTemplate">
    <form id="myform">
        <label>Username</label>
        <input type="text" name="username" id="username" data-val="true" 
               data-val-required="user name required"/>
        <span data-valmsg-for="username" data-valmsg-replace="true"></span>
        <input type="button" id="submit" value="Validate"/>
    </form>
</script>

注意：我也更改data-val-required="true"为data-val-required="user name required"因为data-val-required您指定了错误消息。

为了不显眼的验证工作，您需要$.validator.unobtrusive.parse在 Backbone 视图附加到 DOM 后调用。要做到这一点，有多种退出方式。

一是使用_.defer()函数：

render: function() {
        var tmpl = _.template(this.template);            
        this.$el.html(tmpl);
        _.defer( function(){ $.validator.unobtrusive.parse(tmpl); });            
        return this;
}

然后您可以使用以下代码手动触发不显眼的验证

validateForm: function() {
        $("#myform").data('unobtrusiveValidation').validate();
}

最后这里是一个有效的JSFiddle。

于 2012-12-22T16:38:41.477 回答