Javascript validation type input type fichier

Question

J'utilise la méthode jquery validate et j'utilise le javascript personnalisé pour afficher le nom de l'image qui a été téléchargé en raison d'un problème de css.

Le message de validation s'affiche lorsque aucun fichier d'entrée n'est spécifié mais lorsque l'utilisateur télécharge un fichier, le message est toujours affiché. Il supprime lorsque l'utilisateur clique quelque part. C'est le problème. Il doit être supprimé lorsque l'utilisateur ajoute une image.

Comment résoudre ce problème?

Mon code est le suivant:

$(document).ready(function() { 
 
var rules, msgs, inputName; 
 
rules = {}; 
 
msgs = {}; 
 

 
var images = ['front_passport', 'back_passport']; 
 
var extn = "jpeg|jpg|png|pdf"; 
 
for (var i = 0; i < images.length; i++) { 
 
    var inputImage = images[i]; 
 
    rules[inputImage] = {}; 
 
    rules[inputImage].required = true; 
 
    rules[inputImage].extension = extn; 
 

 
    msgs[inputImage] = 'Please provide an image with one of the following extensions : jpg, png or pdf'; 
 

 

 
} 
 

 
var validateObj = {} 
 
validateObj["rules"] = rules; 
 
validateObj["messages"] = msgs; 
 
validateObj["onkeyup"] = function(element) { 
 
    $(element).valid(); 
 
}; 
 
validateObj["errorPlacement"] = function(error, element) { 
 
    if ($(element).hasClass('app-file')) { 
 
     error.insertAfter($(element).next().next()); 
 
    } 
 

 
}; 
 
validateObj["success"] = function(element) {}; 
 
validateObj["submitHandler"] = function(form) { 
 
    form.submit(); 
 
} 
 

 
//files displaying image name 
 

 

 

 
'use strict'; 
 

 
(function(document, window, index) { 
 
    var inputs = document.querySelectorAll('.app-file'); 
 
    Array.prototype.forEach.call(inputs, function(input) { 
 
     var label = input.nextElementSibling, 
 
      labelVal = label.innerHTML, 
 
      divName = label.nextElementSibling; 
 

 
     input.addEventListener('change', function(e) { 
 
      var fileName = ''; 
 
      if (this.files && this.files.length > 1) 
 
       fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
 
      else 
 
       fileName = e.target.value.split('\\').pop(); 
 

 
      if (fileName) { 
 
       divName.innerHTML = fileName; 
 
      } else { 
 
       label.innerHTML = labelVal; 
 
      } 
 
      $("#individual-form").validate(validateObj); 
 
     }); 
 

 
     // Firefox bug fix 
 
     input.addEventListener('focus', function() { 
 
      input.classList.add('has-focus'); 
 
     }); 
 
     input.addEventListener('blur', function() { 
 
      input.classList.remove('has-focus'); 
 
     }); 
 
    }); 
 
}(document, window, 0)); 
 
$("#individual-form").validate(validateObj); 
 
});

<div class="form-group"> 
 
    <label for="front_passport" class="col-md-2 label-file">Front ID/Passport</label> 
 
    <div class="form-required">*</div> 
 
    <div class="col-md-8"> 
 
    {{ Form::file('front_passport', ["class"=>"app-file"]) }} 
 
    <label for="front_passport" class="file-upload"><span>Upload a File</span></label> 
 
    <div class="file-name"></div> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="back_passport" class="col-md-2 label-file">Back ID/Passport</label> 
 
    <div class="form-required">*</div> 
 
    <div class="col-md-8"> 
 
    {{ Form::file('back_passport', ["class"=>"app-file"]) }} 
 
    <label for="back_passport" class="file-upload"><span>Upload a File</span></label> 
 
    <div class="file-name"></div> 
 
    </div> 
 
</div>

Edité: J'ai trouvé une solution comme ça: $(this).next().next().next().remove();

mais au lieu de cette méthode comment choisir l'étiquette suivante avec classe error - qui est en fait ce message d'erreur que je veux supprimer?

Mise à jour: Mon balisage HTML quand soumettre la forme et il n'y a pas de fichier téléchargé est:

<div class="col-md-8"> 
 

 
    <input type="file" name="front_passport" class="app-file error"> 
 
    <label class="file-upload" for="front_passport"><span>Upload a File</span></label> 
 
    <div class="file-name"></div><label for="front_passport" generated="true" class="error">Please provide an image with one of the following extensions : jpg, gif, png or pdf</label> 
 
</div>

Answer 1

J'ai trouvé la solution - Ajout d'une nouvelle classe à div puis retirez-le:

if(fileName) { 
 
    divName.innerHTML = fileName; 
 
    $(this).parents('.file-wrapper').find('.error').remove(); 
 

 
}

<div class="form-group"> 
 
    <label for="front_passport" class="col-md-2 label-file">Front ID/Passport</label> 
 
    <div class="form-required">*</div> 
 
    <div class="col-md-8 file-wrapper"> 
 

 
    {{ Form::file('front_passport', ["class"=>"app-file"]) }} 
 
    <label for="front_passport" class="file-upload"><span>Upload a File</span></label> 
 
    <div class="file-name"></div> 
 
    </div> 
 
</div>