From d7c6dbd29fa7b8e0df3b319e4c715fe81e2f9923 Mon Sep 17 00:00:00 2001
From: Peter Goodhall <peter@magicbug.co.uk>
Date: Wed, 10 Apr 2024 17:39:33 +0100
Subject: [PATCH] Fixes #3056 Stopping invalid callsigns when creating station
 locations

---
 application/views/station_profile/create.php | 18 ++++++++++++++++--
 assets/css/general.css                       |  4 ++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/application/views/station_profile/create.php b/application/views/station_profile/create.php
index 8cdcaca0..f9a3d185 100644
--- a/application/views/station_profile/create.php
+++ b/application/views/station_profile/create.php
@@ -36,8 +36,22 @@
 
 			<div class="mb-3">
 		    <label for="stationCallsignInput"><?php echo lang("station_location_callsign"); ?></label>
-		    <input type="text" class="form-control" name="station_callsign" id="stationCallsignInput" aria-describedby="stationCallsignInputHelp" placeholder="2M0SQL" required>
-		    <small id="stationCallsignInputHelp" class="form-text text-muted"><?php echo lang("station_location_callsign_hint"); ?></small>
+			<input type="text" class="form-control" name="station_callsign" id="stationCallsignInput" aria-describedby="stationCallsignInputHelp" placeholder="2M0SQL" pattern="[a-zA-Z0-9\/]*" required oninput="validateInput(this);">
+			<div id="stationCallsignInputError" style="display: none; color: red;">Only letters, numbers, and forward slashes are allowed.</div>
+
+			<script>
+			function validateInput(input) {
+				var errorDiv = document.getElementById('stationCallsignInputError');
+				if (input.checkValidity()) {
+					input.classList.remove('error-red-border');
+					errorDiv.style.display = 'none';
+				} else {
+					input.classList.add('error-red-border');
+					errorDiv.style.display = 'block';
+				}
+			}
+			</script>
+			<small id="stationCallsignInputHelp" class="form-text text-muted"><?php echo lang("station_location_callsign_hint"); ?></small>
 		  </div>
 
 			<div class="mb-3">
diff --git a/assets/css/general.css b/assets/css/general.css
index 40d733f7..b33f89d7 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -801,4 +801,8 @@ label {
 tr.htmx-swapping td {
 	opacity: 0;
 	transition: opacity 1s ease-out;
+}
+
+.error-red-border {
+    border-color: red;
 }
\ No newline at end of file