Hi i have a html form with an input file and many more fields .I am going to validate it by jquery form validator plugin . It works like a charm for text inputs and selects but it just validate file input when it is empty. When I choose a file in any wrong type or wrong size , even if I didn't filled other required text input , it submit the form in 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
}
});
