我使用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);
});
&#13;
<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>
&#13;
编辑:我找到了这样的解决方案:
$(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>
&#13;
答案 0 :(得分:0)
我找到了解决方案 - 在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>