JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js"></script>
<form class="some_form" enctype="multipart/form-data" method="post" action="">
<input type="file" name="photo" id="photoInput" />
<input type="submit">
</form>
JavaScript
$.validator.addMethod('width', function(value, element) {
if ($(element).data('width')) {
return $(element).data('width') >= 500;
}
return true;
}, 'Image needs to be wider than 500px');
$(".some_form").validate({
rules: {
photo: {
required: true,
width: 500
}
},
messages: {
photo: {
required: "You must insert an image",
width: "Your image's width must be greater than 500px"
},
}
});