From 1178328186edcbcd2951ea6c96cecc36c0df8748 Mon Sep 17 00:00:00 2001
From: Rick Hays <rhays@haysgang.com>
Date: Wed, 25 Sep 2019 14:37:44 -0500
Subject: [PATCH] Setup basic validation for both input fields, to except only
 a range of numbers, else reports to user to enter.

Signed-off-by: Rick Hays <rhays@haysgang.com>
---
 index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index caf0b23..d3c8044 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,52 @@
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 		<title>Input Screen</title>
+		<script	src="https://code.jquery.com/jquery-3.4.1.js"></script>
+		<script>
+			let value_error = false;    // Flag if Lat/Lon values are out of range.
+			let latitude_low = 38.0;
+			let latitude_high = 40.0;
+			let longitude_low = -96.0;
+			let longitude_high = -94.0;
+
+			function inRange(nVal, nLow, nHigh)
+			{
+				nVal = Number(nVal);
+				nLow = Number(nLow);
+				nHigh = Number(nHigh);
+				return (nVal >= nLow) && (nVal <= nHigh);
+			}
+
+			function submitForm()
+			{
+				// Clear values
+				value_error = false;
+				$("#latitude_error").html('');
+				$("#longitude_error").html('');
+				// Set Vars
+				let nLatitude  = $("#latitude").val();
+				let nLongitude = $("#longitude").val();
+
+				if ((!$.isNumeric(nLatitude)) || (!inRange(nLatitude,latitude_low,latitude_high)))
+				{
+					$("#latitude_error").html('Please enter a value between ' + latitude_low + ' and ' + latitude_high);
+					value_error = true;
+				}
+
+				if ((!$.isNumeric(nLongitude)) || (!inRange(nLongitude,longitude_low,longitude_high)))
+				{
+					$("#longitude_error").html('Please enter a value between ' + longitude_low + ' and ' + longitude_high);
+					value_error = true;
+				}
+
+				// if Lat or Lon values are out of range return to form.
+				if (value_error) { return; }
+
+
+
+				alert('Submit Form');
+			}
+		</script>
 	</head>
 	<body>
 		<header>
@@ -12,17 +58,19 @@
 			</div>
 		</header>
 		<section>
-			<form action="#" target="_self" method="get">
+			<form action="" method="get">
+				<div id="latitude_error"></div>
 				<div>
 					<label for="latitude">Latitude:</label>
-					<input type="number" name="latitude" id="latitude" />
+					<input type="text" name="latitude" id="latitude" />
 				</div>
+				<div id="longitude_error"></div>
 				<div>
 					<label for="longitude">Longitude:</label>
-					<input type="number" name="longitude" id="longitude" />
+					<input type="text" name="longitude" id="longitude" />
 				</div>
 				<div>
-					<input type="submit" value="Submit">
+					<input type="button" onClick="submitForm()" value=" Save ">
 				</div>
 			</form>
 		</section>
