invalid event listener is added to file input

This commit is contained in:
saikumarjetti 2025-03-18 00:41:48 +05:30
parent 3ec2817485
commit 5938e18e2e
2 changed files with 17 additions and 10 deletions

View File

@ -36,6 +36,7 @@ function setupFileInput(chooser) {
const inputContainerId = chooser.getAttribute('data-bs-element-container-id');
let inputContainer = document.getElementById(inputContainerId);
let fileInput = document.getElementById(elementId);
if (inputContainer.id === 'pdf-upload-input-container') {
inputContainer.querySelector('#dragAndDrop').innerHTML = window.fileInput.dragAndDropPDF;
@ -51,6 +52,12 @@ function setupFileInput(chooser) {
inputBtn.click();
});
// Handle form validation if the input is left empty
fileInput.addEventListener("invalid", (e)=>{
e.preventDefault();
alert('Please select a PDF file before submitting.')
});
const dragenterListener = function () {
dragCounter++;
if (!overlay) {

View File

@ -232,7 +232,7 @@
th:name="${name}+'-input'" th:id="${name}+'-input-container'" th:data-text="#{fileChooser.hoveredDragAndDrop}">
<label class="file-input-btn d-none">
<input type="file" class="form-control" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept} + ',.zip'"
th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'" oninvalid="alert('Please select a PDF file before submitting.');">
th:attr="multiple=${!disableMultipleFiles}" th:required="${notRequired} ? null : 'required'">
Browse
</label>
<div class="d-flex justify-content-start align-items-center" id="fileInputText">