【发布时间】：2016-09-23 13:40:34
【问题描述】：
我正在使用 jquery validate 方法，并且我正在使用自定义 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>【问题讨论】：
-
$(this).find('.error') ?
标签： javascript jquery validation