[英]How can I apply this validation function to all inputs?
I have this code that works to validate just one input file, but I need to validate multiple fields (since the users can add as much "input files" as they want) and don't now how.我有这段代码可以只验证一个输入文件,但我需要验证多个字段(因为用户可以根据需要添加尽可能多的“输入文件”),现在不知道如何。 I've being trying to use loops but with no results (mostly because I don't understand them even when I've been reading it over and over in w3school).我一直在尝试使用循环,但没有结果(主要是因为即使我在 w3school 一遍又一遍地阅读它,我也不理解它们)。
https://jsfiddle.net/ElenaMcDowell/2xrqp6zg/2/ https://jsfiddle.net/ElenaMcDowell/2xrqp6zg/2/
$( ".postreplyForm" ).submit(function( event ) {
var fileBox = $('.post-file').val(); //This is the Class of the input file
if (fileBox === '') {
//If there is no file
return;
} else {
//File format
var fileExtension = ['jpg', 'jpeg', 'png', 'mp3', 'mp4', 'pdf', 'pps', 'ppt', 'pptx', 'xls', 'doc', 'docx', 'txt'];
if ($.inArray($('.post-file').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
$(".errorFile").html('<br><center><p class="signuperror">File format not allowed.</p></center><br>');
} else {
$(".errorFile").html(' ');
//File size
var fileSize = $('.post-file')[0].files[0].size;
if (fileSize > 1000000) {
$(".errorFile").html('<br><center><p class="signuperror">The file is too big.</p></center><br>');
} else {
$(".errorFile").html(' ');
return;
}
}
}
});
You can get all values using $('.post-file')[0].files
then loop through each files and check condition then print some message in your div errorFiles
.您可以使用$('.post-file')[0].files
获取所有值,然后遍历每个文件并检查条件,然后在 div errorFiles
中打印一些消息。 Also, use some variable and set it to true
and if any condition doesn't meet set to false
depending on this variable prevent your form to submit.此外,使用一些变量并将其设置为true
,如果任何条件不符合设置为false
,具体取决于此变量,请阻止您的表单提交。
Demo Code :演示代码:
$(".postreplyForm").submit(function(event) { var fileBox = $('.post-file').val(); if (fileBox === '') { return false; //prevent form to submit } else { //File format var fileExtension = ['jpg', 'jpeg', 'png', 'mp3', 'mp4', 'pdf', 'pps', 'ppt', 'pptx', 'xls', 'doc', 'docx', 'txt']; var flag = true; //decalre this var fileArray = $('.post-file')[0].files; //get all files $(".errorFile").html(''); //loop through files $.each(fileArray, function(i, v) { name = v.name; //name of file fileSize = v.size; //size of file console.log(name); if ($.inArray(name.split('.').pop().toLowerCase(), fileExtension) == -1) { flag = false; $(".errorFile").html('<br><center><p class="signuperror">File format not allowed.</p></center><br>'); } else { if (fileSize > 1000000) { $(".errorFile").html('<br><center><p class="signuperror">The file is too big.</p></center><br>'); flag = false; } } }) } //check not true prevnt submit if (;flag) { return false; } else { return true; } });
.errorFile { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="create-mode postreplyForm" method="post" action="a.php" name="post" enctype="multipart/form-data"> <table class="table-newpost"> <tr> <td colspan="5"><br> <div style="font-weight: bold; font-size: 14px; margin-bottom: -10px;">Attach file</div> <br> <span>File formats allowed: (.jpg, .jpeg, .png, .mp3, .mp4, .pdf, .zip, .rar, .pps, .ppt, .pptx, .xls, .doc, .docx, .txt, .rtf)</span> <br><br> <div class="fileBox"> <div style="display: flex; margin-bottom: 2px;"> <input type="file" name="file[]" id="fileID1" class="post-file" multiple="multiple"> <div id="1" class="fileBtn fileDeleteInPost" title="Delete file">x</div> <div class="fileBtn add-file" title="Add file">+</div> </div> </div> <div class="errorFile"></div> </td> </tr> <tr> <td colspan="5" style="text-align: right;"> <input type="hidden" name="reply-by" value="<?php echo $_SESSION['userId']; ?>"> <button type="submit" name="submit-postreply" id="Miau">Submit</button> </td> </tr> </table> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.