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

我正在尝试显示单击"验证"按钮时需要usernaem的错误消息.但是没有任何反应,也是在模糊了控制台中可见的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您指定了错误消息.

为了进行不显眼的验证工作,您需要$.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.