Question

我的表单可以包含0到<input type="file">个元素。我根据动态添加到页面的数量顺序命名它们。

例如：

<input type="file" required="" name="fileupload1" id="fileupload1">
<input type="file" required="" name="fileupload2" id="fileupload2">
<input type="file" required="" name="fileupload3" id="fileupload3">
<input type="file" required="" name="fileupload999" id="fileupload999">

在我的JQuery中，我想在可接受的MIME /文件类型上验证这些输入。像这样：

$("#formNew").validate({
    rules: {
        fileupload: {
            required: true, 
            accept: "image/jpeg, image/pjpeg"
        }
    }

我的问题是输入文件元素的name属性是动态的。它必须是动态的，以便我的Web应用程序可以正确处理每个上载。所以显然使用“fileupload”不会在规则部分工作。

如何为所有名为“fileupload”的输入设置规则？

这是动态添加输入的代码：

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");
    filenumber++;
    return false;
});
$("#FileUploader").on('click', '.RemoveFileUpload', function () { //Remove input
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

Answer 1

添加了一个元素，使用rules方法添加规则

//bug fixed thanks to @Sparky
$('input[name^="fileupload"]').each(function () {
    $(this).rules('add', {
        required: true,
        accept: "image/jpeg, image/pjpeg"
    })
})

演示：Fiddle

更新

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
    var $li = $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");

    $('#FileUpload' + filenumber).rules('add', {
        required: true,
        accept: "image/jpeg, image/pjpeg"
    })

    filenumber++;
    return false;
});

Answer 2

创建元素后立即使用the .rules('add') method ...

var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile

    // create the new input element
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" /> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");

    // declare the rule on this newly created input field        
    $('#FileUpload' + filenumber).rules('add', {
        required: true,  // <- with this you would not need 'required' attribute on input
        accept: "image/jpeg, image/pjpeg"
    });

    filenumber++; // increment counter for next time

    return false;
});

您仍然需要使用.validate()在DOM就绪处理程序中初始化插件。
您仍需要使用.validate()为静态元素声明规则。当页面加载时，表单中的输入元素是什么......在.validate()内声明其规则。
当您只将jQuery选择器附加到.each()时定位一个元素时，您无需使用.rules()。
当您使用required或required声明.validate()规则时，您的输入元素不需要.rules('add')属性。无论出于何种原因，如果您仍然需要HTML5属性，请至少使用required="required"之类的正确格式。

工作演示：http://jsfiddle.net/8dAU8/5/

Answer 3

所以，我有同样的问题，遗憾的是只是添加规则不起作用。我发现accept：和extension：默认情况下不是JQuery validate.js的一部分，它需要一个额外的Methods.js插件才能使它工作。

因此，对于其他关注此主题并仍然无效的人，除了上面的答案外，您还可以尝试将additional-Methods.js添加到您的代码中，它应该有效。

JQuery验证输入文件类型

3 个答案: