web-dev-qa-db-fra.com

JQuery Valider le type de fichier d'entrée

J'ai un formulaire qui peut avoir 0-centaines de <input type="file"> éléments. Je les ai nommés séquentiellement en fonction du nombre qui sont ajoutés dynamiquement à la page.

Par exemple:

<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">

Dans mon JQuery, je veux valider ces entrées sur un type MIME/fichier acceptable. Comme ça:

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

Immédiatement mon problème est que l'attribut name des éléments du fichier d'entrée est dynamique. Il doit être dynamique pour que mon application web puisse gérer correctement chaque téléchargement. Donc, évidemment, utiliser "fileupload" ne fonctionnera pas dans la section des règles.

Comment définir les règles pour toutes les entrées qui ont un nom comme "fileupload"?

C'est le code qui ajoute dynamiquement les entrées:

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;
});
jqueryjquery-validate
11
volume one

Une fois les éléments ajoutés, utilisez la méthode rules pour ajouter les règles

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

Démo: Fiddle

Mise à jour

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;
});
7
Arun P Johny

Utilisez simplement la méthode .rules('add') immédiatement après avoir créé l'élément ...

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

  • Vous devrez toujours utiliser .validate() pour initialiser le plugin dans un gestionnaire prêt pour DOM.

  • Vous devrez toujours déclarer des règles pour vos éléments statiques à l'aide de .validate(). Quels que soient les éléments d'entrée qui font partie du formulaire lors du chargement de la page ... déclarez leurs règles dans .validate().

  • Vous n'avez pas besoin d'utiliser .each(), lorsque vous ne ciblez qu'UN élément avec le sélecteur jQuery attaché à .rules().

  • Vous n'avez pas besoin de l'attribut required sur votre élément d'entrée lorsque vous déclarez la règle required à l'aide de .validate() ou .rules('add'). Pour une raison quelconque, si vous voulez toujours l'attribut HTML5, utilisez au moins un format approprié comme required="required".

DEMO de travail: http://jsfiddle.net/8dAU8/5/

2
Sparky

Donc, j'ai eu le même problème et malheureusement, simplement ajouter aux règles n'a pas fonctionné. J'ai découvert qu'accept: et extension: ne font pas partie de JQuery validate.js par défaut et cela nécessite un plugin-Methods.js supplémentaire pour le faire fonctionner.

Donc, pour toute autre personne qui a suivi ce fil et cela n'a toujours pas fonctionné, vous pouvez essayer d'ajouter additional-Methods.js à votre balise en plus de la réponse ci-dessus et cela devrait fonctionner.

2
Dedan