To disable the submit button when a file input validation error occurs using the Krajee file-input plugin, you can listen for the 'filebatchuploaderror' event and disable the submit button in the event handler. Here's how you can do it:

  1. First, make sure you have included the Krajee file-input plugin in your HTML file:
<!-- Include required CSS and JS files for the Krajee file-input plugin --> <link href="path/to/css/fileinput.min.css" rel="stylesheet"> <script src="path/to/js/fileinput.min.js"></script>
  1. Create your file input element with the Krajee file-input plugin:
<input id="fileInput" type="file" name="files[]" multiple>
  1. Initialize the file-input plugin and add the event listener to disable the submit button on validation error:
<script> $(document).ready(function () { // Initialize the file-input plugin $("#fileInput").fileinput({ // Your file-input plugin options here }).on('filebatchuploaderror', function (event, data, previewId, index) { // Disable the submit button on file input validation error $('#submitBtn').prop('disabled', true); }); }); </script>

In this example, replace #submitBtn with the ID or selector of your submit button element. The 'filebatchuploaderror' event is triggered when there is a validation error during file upload (e.g., file size, file type, etc.). When this event occurs, we disable the submit button to prevent form submission.

Note: Make sure you have appropriate validation settings configured in the Krajee file-input plugin options to trigger the 'filebatchuploaderror' event on file validation errors. Refer to the plugin documentation for more details on available options and events.

Also, keep in mind that client-side validation can be bypassed, and it's essential to perform server-side validation as well to ensure data integrity and security. Always validate file inputs on the server-side before processing the uploaded files.

Have questions or queries?
Get in Touch