在敲除模板绑定中不显眼的客户端验证

Question

我有一个带有数据注释的模型,我是一个使用knockout模板绑定和映射插件的viewmodel动态绑定.我正在尝试对我的模型进行不显眼的客户端验证.在这种情况下我们如何做到这一点.任何帮助/建议？

public class MyUser
    {
        [Required]
        [StringLength(35)]
        public string Username { get; set; }

        [Required]
        [StringLength(35)]
        public string Forename { get; set; }

        [Required]
        [StringLength(35)]
        public string Surname { get; set; }
    }

在我看来,我是使用ajax动态模板绑定MyUser列表.

public JsonResult TestKnockout()
        {
            IList<MyUser> myUserList = new List<MyUser>();
            myUserList.Add(new MyUser { Username = "ajohn", Surname = "surname" });
            myUserList.Add(new MyUser { Username = "ajohn1", Surname = "surname1" });

            return Json(myUserList, JsonRequestBehavior.AllowGet);
        }
    }

视图:

<form id="Userform" action='@Url.Action("Save", "Home")' data-bind="template: {name: 'UserTemplate', foreach:UserList}">
<input type="Submit" name="name" value="Submit" />
</form>
<script id="UserTemplate" type="text/Html">
 <input type="text" data-bind="value: Username"></input>
 <input type="text" data-bind="value: Forename"></input>
 <input type="text" data-bind="value: Surname"></input> 
</script>
<script type="text/javascript">


    var viewModel = {
        UserList: ko.observableArray(new Array()),

        Save: function () {          
            //// reached here means validation is done.
            alert("Save");
        }
    }
    ko.applyBindings(viewModel);


    $.ajax({
        type: 'GET',
        url: '../Home/TestKnockout',
        contentType: "application/json",
        success: function (data) {
            $.each(ko.mapping.fromJS(data)(), function () {
                viewModel.UserList.push(this);
            })

            // attach the jquery unobtrusive validator
            $.validator.unobtrusive.parse("#Userform");

            // bind the submit handler to unobtrusive validation.
            $("#Userform").data("validator").settings.submitHandler = viewModel.Save;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });

</script>

Answer 1

pilavdzice和drogon答案相当不错,但我们忘记了基本点.

由于我们使用MVVM模式来分离UI和数据(+ vm),因此我们不希望执行UI验证,而是使用DATA VALIDATION.这两个是完全不同的,jquery validate是一个很棒的插件,但它进行了UI验证(它从UI开始检查字段).

我发现淘汰验证插件看起来做得很好,它做的是走相反的道路,它验证你的viewmodel而不是你的UI(它实际上映射到UI元素来显示错误).

不幸的是,如果你的viewmodel变得复杂,那个插件会有一些问题,但无论如何这都是要走的路.

只要我们不使用MVVM模式,UI验证就完美了,毕竟我们将组件(MV-VM)分开了吗？

希望我帮忙!

谢谢!

Answer 2

我会使用 jquery 的事件绑定来实现这一点。

首先，将 data-val 属性添加到要验证的输入中。（为了确定要使用哪些 data-val 属性，我通常将表单服务器端绑定到模型并查看源。）

     <input data-val-required="test" data-val="true" data-bind="visible: 
     $parent.userEditMode, value: FirstName" />

其次，添加一个验证实用函数——这会调用 MVC 在幕后使用的 jquery 验证插件。

    function validateForm(thisForm) {
        var val = thisForm.validate();
        var isValid = val.form();
        alert(isValid);
        if (!isValid) {
            thisForm.find('.input-validation-error').first().focus();
        }
        return isValid;
    }

第三，在发出视图模型方法之前调用验证。确保从页面标记中删除“点击”数据绑定属性。

$('#..your form id...').live('submit', function (e) {
    e.preventDefault();
    if(validateForm($(this)))
        viewModel.saveUser();
});