JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" />

<form>
<br><br><br><br>
<input value="" class="validate[required, funcCall[validFilename]]" type="file" name="attachment" id="attachment" />
</form>

CSS

form { font-family: arial }

JavaScript

$(document).ready(function() {
   
   $("form").validationEngine('attach');
   $("form").validationEngine('validate');
   console.log()
 });


function validFilename(field, rules, i, options) {
	var uploadedFile = $(field);
	
if (uploadedFile) {
	var extensions = rules[i + 1];               
	var mimeFilter = new RegExp(extensions);
	var file = document.getElementById('attachment').files[0].name;
	var pattern = new RegExp(/^[a-zA-Z0-9_.]+$/);
	
  if (!pattern.test( file ) ) {
	   return '"' + file +  '" filename is invalid. No special character allowed.';
		}
		
	}

}