在 Backbone.js 视图上调用 jQuery Unobtrusive 验证

Question

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

Jsfiddle

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();
}

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

Answer 1

jQuery 不显眼的验证插件（最初是为 ASP.Net MVC3 构建的）要求将您的 inputs 放在 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 指定了错误消息。

为了不显眼的验证工作，您需要在 Backbone 视图附加到 DOM 后调用 $.validator.unobtrusive.parse。为此there are multiple ways exits。

一种是使用_.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。