我正在使用Jquery验证来验证文件上传器,如下所示:
HTML
<form class="getintouch_form" name="Form_Career" action="" id="frm">
<input type="file" id="fileInput" name="UploadResume" placeholder="Upload Resume">
<button class="submitbtn bluebutton" id="BtnSend" type="button">Send</button>
</form>
JQuery
$.validator.addMethod(
"UploadResume",
function(value, element) {
return /\.(doc|docx|pdf)$/i.test(value);
},
"Only docx,doc,pdf file formats allow"
);
$("#frm").validate({
onfocusout: function(element) {
$(element).valid();
},
rules: {
UploadResume: {
required: true,
UploadResume: true
}
},
messages: {
UploadResume: {
required: "Resume is mandatory field."
}
},
});
问题
单击“上载”按钮后立即触发验证,而不是在选择文件后单击“确定”按钮后触发。我想在选择文件后才触发验证。我也附上了Codepen Link。
答案 0 :(得分:2)
要创建所需的行为,可以在输入的valid()
事件下的表单上调用change
,该事件在选择文件后触发。试试这个:
$('#fileInput').change(function() {
$('#frm').valid();
});
答案 1 :(得分:0)
请尝试使用简单的jquery函数进行验证和文件类型检查。 在这里我提到相同的新jquery代码。
function FileUploadValidation(){
var allowedFiles = [".doc", ".docx", ".pdf"];
var fileUpload = $("#fileInput");
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
if (!regex.test(fileUpload.val().toLowerCase())) {
alert("Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.");
return false;
}
return true;
}
$( "#BtnSend" ).click(function() {
FileUploadValidation();
});
$('#fileInput').bind('change', function() {
if(!FileUploadValidation())
$('#fileInput').val();
});