Comment retourner "valide" si le type d'entrée = "fichier" = fichier sélectionné?

Question

J'utilise jquery et le jquery validate plugin pour mon formulaire.

Si le input_17 a le contenu length > 1, vous devez sélectionner un fichier input_1_67. Ça marche.

 input_17: { 
     required: function(element) { 
      return $("#input_1_67").val().length > 1 
     } 
    } 

Maintenant, si l'utilisateur a sélectionner un fichier j'aime retourner une classe « valide » au input_17. Des idées comment je peux obtenir cette classe? Et: j'aime ajouter cette classe seulement si

$("#input_1_67").val().length > 1 

et un fichier est sélectionné.

Answer 1

Si vous utilisez le plugin jQuery validator, vous ne devriez pas avoir à ajouter de classes à vos entrées, le validateur le fait pour vous. Autant que je sache, le navigateur ne vous permet pas de lire le chemin du fichier, ou de le définir pour cela. La seule chose que vous pourrez obtenir est le nom du fichier. Ceci est une restriction de sécurité pour empêcher l'accès non autorisé aux fichiers. Vous pouvez obtenir le nom de fichier en obtenant la valeur. Une fois que vous avez cela, vous pouvez faire une validation supplémentaire sur le type de fichier (mais pas fiable sur le client). Si vous voulez ajouter une règle personnalisée au validateur pour vérifier le type de fichier, vous pouvez le faire:

jQuery.validator.addMethod("filetype", function(value, element) { 
    var types = ['jpeg', 'png', 'gif'], 
     ext = value.replace(/.*[.]/, '').toLowerCase(); 

    if (types.indexOf(ext) !== -1) { 
     return true; 
    } 
    return false; 
}, 'Insert invalid message here'); 

Pour faire ce qui précède un peu plus réutilisable, prenez le tableau de types de fichiers de la fonction et les transmettre en tant que paramètre à la fonction. Voir ce lien: http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

Deuxièmement, lorsque vous cliquez sur une entrée de fichier ou cliquez sur le bouton «Parcourir», une boîte de dialogue s'ouvre. Donc, la seule chose qui devrait être dans l'entrée est un nom de fichier. Avec ces hypothèses, la validité du champ peut être une simple vérification pour voir si quelque chose est là, ce que vous faites déjà.

Answer 2

Vous pouvez simplement lier l'événement change à l'entrée souhaitée, à savoir:

$('#input_1_67').change(function(){ 
    $(this).addClass('valid'); 
}); 

Answer 3

$('#input_1_67').change(function(){ 
    if($("#input_1_67").val().length > 1) 
     $("#input_17").addClass('valid'); 
    else 
     $("#input_17").removeClass('valid'); 
    } 
}); 

En outre, si vous utilisez validateur jquery, vous pouvez essayer

$('#input_1_67').change(function(){ 
    $("#input_17").valid(); 
}); 

Cette déclenchera la méthode du validateur (comme la validité de input_17 dépend de input_1_67, elle devrait être validée chaque fois que input_1_67 change) et le plugin va automatiquement définir la classe css.