没有使用MVC 4.5非侵入式验证提交实时数据

Question

我们有一个表单，用户可以将项目从一个多选框移到另一个。 我们使用的是MVC 4.5，并且jquery使用Microsoft不引人注目的JavaScript进行验证。

问题在于，提交表单时，选择框内的值不会被提交，因为用户在移动项目后不知道他们还必须选择所有这些项目以进行提交。

因此，解决方案听起来很简单：使用jquery在提交时选择所有项目。

经过一些研究（感谢stackoverflow社区），我们能够发现必要的jquery代码来拦截提交过程。 但是，问题在于，当代码选择项目时，仅选择框中已有的项目被选择。 不会选择已移动的实时（动态）项目。

这是我们首先使用的代码：

$('#UserProfileForm').bind('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

我们发现使用绑定不起作用，但实时应：

$('#UserProfileForm').live('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

但是，我们正在使用jQuery 1.9，并且删除了live函数。 它已被替换为：

$(document).on('invalid-form.validate', 'form', function () {
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

但是，这仍然行不通。 因此，我将选择功能替换为警报，以查看其是否完全起作用：

$(document).on('invalid-form.validate', 'form', function () {
    alert('test');
});

警报不会弹出。 有任何想法吗？

附加信息

对于那些想知道为什么我引用invalid-form.validate的人，是因为我正在测试无效的表单数据。 如果它是有效的表单数据，则将应用相同的方案。 我也还没有谈到如何将实时数据绑定到有效的表单提交过程。

Answer 1

在检查了元素之后，我注意到jquery正在将selected属性添加到选项中。 但是，没有突出显示这些选项。 这让我认为可能是jquery调用添加了所选属性，这是错误的。

经过一些试验，我发现这是错误的。 看来，如果您使用jatt的attr函数，则实际上并没有将DOM中的选项设置为selected。 使用prop函数可以。

这是代码：

$(document).on('submit', 'form', function (e) {
    $(this).find('.selectbox option').each(function (i) {
        $(this).prop("selected", true);
    });
});

这使表单可以选择提交表单时选择的所有选项，无论提交处理程序是否有效。 如果您只想根据无效信息进行选择，请使用以下命令：

$('form').bind('invalid-form.validate', function () {
    $(this).find('.selectbox option').each(function (i) {
         $(this).prop("selected", true);
    });
});

请享用！