Feature: disable preview button until CSV file is selected

Added validation to prevent users from submitting the upload form without
selecting a file first. The preview button is now disabled by default and
only enables when a file is selected, improving user experience and
preventing empty form submissions.

Changes:
- Added IDs to file input and preview button
- Button starts in disabled state
- JavaScript listener enables button when file is selected
- Button disables again if file selection is cleared
This commit is contained in:
AJ
2025-11-16 12:07:17 -05:00
parent e0638039d8
commit a85de793d7
2 changed files with 13 additions and 3 deletions

View File

@@ -165,9 +165,9 @@ else
<div> <div>
<label class="form-label">CSV file</label> <label class="form-label">CSV file</label>
<input asp-for="Csv" type="file" class="form-control" accept=".csv" /> <input asp-for="Csv" type="file" class="form-control" accept=".csv" id="csvFileInput" />
<span asp-validation-for="Csv" class="text-danger"></span> <span asp-validation-for="Csv" class="text-danger"></span>
</div> </div>
<fieldset class="border rounded p-3"> <fieldset class="border rounded p-3">
@@ -228,7 +228,7 @@ else
</div> </div>
</fieldset> </fieldset>
<button type="submit" class="btn btn-primary">Preview Transactions</button> <button type="submit" class="btn btn-primary" id="previewButton" disabled>Preview Transactions</button>
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
</form> </form>
} }

View File

@@ -113,4 +113,14 @@ document.addEventListener('DOMContentLoaded', function() {
if (totalRows > pageSize) { if (totalRows > pageSize) {
showPage(0); showPage(0);
} }
// Enable/disable preview button based on file selection
const csvFileInput = document.getElementById('csvFileInput');
const previewButton = document.getElementById('previewButton');
if (csvFileInput && previewButton) {
csvFileInput.addEventListener('change', function() {
previewButton.disabled = !this.files || this.files.length === 0;
});
}
}); });