Javascript 验证输入类型文件

Question

我正在使用jquery验证方法，并且我正在使用自定义javascript来显示由于css问题而上传的图像名称。

未指定输入文件时会显示验证消息，但当用户上传文件时，仍会显示消息。当用户点击某处时它会被删除。那就是问题所在。当用户添加一些图像时应该将其删除。

我应该如何解决这个问题？

我的代码如下:

$(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>

编辑:我找到了这样的解决方案:$(this).next().next().next().remove();

但是如何选择带有类error的下一个标签而不是这种方法 - 这实际上是我想要删除的错误消息？

更新:提交表单且没有上传文件时我的 html 标记是:

<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

我找到了解决方案 - 向 div 添加了一个新类，然后将其删除:

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>