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

我们发现使用bind不起作用，但应该是：

$('#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正在将选定的属性添加到选项中。但是，没有强调选项。这让我想到，添加所选属性的jquery调用可能是错误的。

经过一些实验，我发现这是错误的。看来如果你使用jquery的attr函数，它实际上并没有在DOM中选择选项。使用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);
    });
});

享受！

使用MVC 4.5不引人注意的验证不提交实时数据

1 个答案: