jquery 验证文件输入不起作用
jquery validation file input doesnot work
您好,我有一个带有输入文件和更多字段的 html 表单。我将通过 jquery 表单验证器插件对其进行验证。它就像文本输入和选择的魅力一样工作,但它只是在文件为空时验证文件输入。当我选择错误类型或错误大小的文件时,即使我没有填写其他所需的文本输入,它也会在 GET 中提交表单 method.this is my jquery code:
$("#form").validate({
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
errorClass: 'validation-error-label',
successClass: 'validation-valid-label',
highlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
// Different components require proper error label placement
errorPlacement: function (error, element) {
// Styled checkboxes, radios, bootstrap switch
if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo(element.parent().parent().parent().parent());
} else {
error.appendTo(element.parent().parent().parent().parent().parent());
}
}
// Unstyled checkboxes, radios
else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
error.appendTo(element.parent().parent().parent());
}
// Input with icons and Select2
else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo(element.parent());
}
// Inline checkboxes, radios
else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo(element.parent().parent());
}
// Input group, styled file input
else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
error.appendTo(element.parent().parent());
}
// Inline checkboxes, radios
// else if (element.parents().hasClass('uploader')) {
// error.appendTo(element.parent().parent().parent().parent());
// }
else {
error.insertAfter(element);
}
},
validClass: "validation-valid-label",
success: function (label) {
label.addClass("validation-valid-label").text("معتبر.")
},
rules: {
title: {
required: true,
minlength: 8
},
unique_name: {
required: true,
minlength: 3
},
lang: {
required: true,
},
style: {
required: true,
},
image01: {
required: true,
// extension: "gif|png|jpg|jpeg", // work with additional-mothods.js
accept: "image/jpeg, image/pjpeg",
filesize: 1000000, // 1MB, this filesize method is the custom method that I create. the code can be found in this post.
}
},
messages: {
image01: {
require: "لطفا لوگوی سایت را انتخاب نمایید",
filesize: "حجم مجاز فایل ۱ مگابایت می باشد",
extension: "فرمت مجاز فایل jpeg,gif,png می باشد"
},
title: {
required: "لطفا فیلد را با حداقل 8 کاراکتر کامل نمایید",
},
unique_name: {
required: "لطفا فیلد مورد نظر را کامل کنید",
minlength: "حداقل ۳ کاراکتر.کاراکترها بهتر است انگلیسی باشد"
},
lang: {
required: "لطفا زبان مورد نظر را انتخاب نمایید",
},
style: {
required: "لطفا قالب مورد نظر را انتخاب نمایید",
}
},
submitHandler: function (form) {
$.ajax({
type: "POST",
//enctype: 'multipart/form-data',
url: "/admin/{{ CURRENTCLASS }}/fullInsert",
data: new FormData($("#form")[0]),
datatype: 'json',
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
//$("#loaderDiv").show();
},
success: function (result) {
result = $.parseJSON(result);
if (result.dataUpload === true && result.imageUpload === true) {
$('#modalheader').removeClass().addClass('modal-header bg-success');
$('.modal-title').html("ثبت اطلاعات");
$('#modal-msg').html(result.dataEntryMsg);
$('form')[0].reset();
} else if (!result.dataUpload) {
$('#modalheader').removeClass().addClass('modal-header bg-danger');
$('.modal-title').html("خطا در ثبت اطلاعات");
$('#modal-msg').html(result.dataEntryMsg);
$('form')[0].reset();
} else if (result.dataUpload == true & result.imageUpload == false) {
$('#modalheader').removeClass().addClass('modal-header bg-warning');
$('.modal-title').html("خطا در ثبت تصویر");
$('.modal-body').html(result.dataEntryMsg + "<br>" + result.imgUploadMsg);
}
$('#modal_theme').modal('toggle');
},
complete: function () {
//$("#loaderDiv").hide();
},
error: function (result) {
// alert('4');
// $('#modal_theme').modal('toggle');
// $("#loaderDiv").hide();
// $('.modal-body').html(result.msg);
// $('#delModal').modal('toggle');
}
});
return false; // required to block normal submit since you used ajax
}
});
经过深入搜索,我发现了问题所在。要使用 jquery 验证插件验证扩展,您必须包括 additional_methods.js file.it 必须在 validate.js[= 之后添加14=] 文件。希望对你有帮助。
您好,我有一个带有输入文件和更多字段的 html 表单。我将通过 jquery 表单验证器插件对其进行验证。它就像文本输入和选择的魅力一样工作,但它只是在文件为空时验证文件输入。当我选择错误类型或错误大小的文件时,即使我没有填写其他所需的文本输入,它也会在 GET 中提交表单 method.this is my jquery code:
$("#form").validate({
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
errorClass: 'validation-error-label',
successClass: 'validation-valid-label',
highlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass);
},
// Different components require proper error label placement
errorPlacement: function (error, element) {
// Styled checkboxes, radios, bootstrap switch
if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo(element.parent().parent().parent().parent());
} else {
error.appendTo(element.parent().parent().parent().parent().parent());
}
}
// Unstyled checkboxes, radios
else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
error.appendTo(element.parent().parent().parent());
}
// Input with icons and Select2
else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo(element.parent());
}
// Inline checkboxes, radios
else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo(element.parent().parent());
}
// Input group, styled file input
else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
error.appendTo(element.parent().parent());
}
// Inline checkboxes, radios
// else if (element.parents().hasClass('uploader')) {
// error.appendTo(element.parent().parent().parent().parent());
// }
else {
error.insertAfter(element);
}
},
validClass: "validation-valid-label",
success: function (label) {
label.addClass("validation-valid-label").text("معتبر.")
},
rules: {
title: {
required: true,
minlength: 8
},
unique_name: {
required: true,
minlength: 3
},
lang: {
required: true,
},
style: {
required: true,
},
image01: {
required: true,
// extension: "gif|png|jpg|jpeg", // work with additional-mothods.js
accept: "image/jpeg, image/pjpeg",
filesize: 1000000, // 1MB, this filesize method is the custom method that I create. the code can be found in this post.
}
},
messages: {
image01: {
require: "لطفا لوگوی سایت را انتخاب نمایید",
filesize: "حجم مجاز فایل ۱ مگابایت می باشد",
extension: "فرمت مجاز فایل jpeg,gif,png می باشد"
},
title: {
required: "لطفا فیلد را با حداقل 8 کاراکتر کامل نمایید",
},
unique_name: {
required: "لطفا فیلد مورد نظر را کامل کنید",
minlength: "حداقل ۳ کاراکتر.کاراکترها بهتر است انگلیسی باشد"
},
lang: {
required: "لطفا زبان مورد نظر را انتخاب نمایید",
},
style: {
required: "لطفا قالب مورد نظر را انتخاب نمایید",
}
},
submitHandler: function (form) {
$.ajax({
type: "POST",
//enctype: 'multipart/form-data',
url: "/admin/{{ CURRENTCLASS }}/fullInsert",
data: new FormData($("#form")[0]),
datatype: 'json',
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
//$("#loaderDiv").show();
},
success: function (result) {
result = $.parseJSON(result);
if (result.dataUpload === true && result.imageUpload === true) {
$('#modalheader').removeClass().addClass('modal-header bg-success');
$('.modal-title').html("ثبت اطلاعات");
$('#modal-msg').html(result.dataEntryMsg);
$('form')[0].reset();
} else if (!result.dataUpload) {
$('#modalheader').removeClass().addClass('modal-header bg-danger');
$('.modal-title').html("خطا در ثبت اطلاعات");
$('#modal-msg').html(result.dataEntryMsg);
$('form')[0].reset();
} else if (result.dataUpload == true & result.imageUpload == false) {
$('#modalheader').removeClass().addClass('modal-header bg-warning');
$('.modal-title').html("خطا در ثبت تصویر");
$('.modal-body').html(result.dataEntryMsg + "<br>" + result.imgUploadMsg);
}
$('#modal_theme').modal('toggle');
},
complete: function () {
//$("#loaderDiv").hide();
},
error: function (result) {
// alert('4');
// $('#modal_theme').modal('toggle');
// $("#loaderDiv").hide();
// $('.modal-body').html(result.msg);
// $('#delModal').modal('toggle');
}
});
return false; // required to block normal submit since you used ajax
}
});
经过深入搜索,我发现了问题所在。要使用 jquery 验证插件验证扩展,您必须包括 additional_methods.js file.it 必须在 validate.js[= 之后添加14=] 文件。希望对你有帮助。