Require user to enter some words

Author: wimpyprogrammer

demo/index.html

@@ -41,14 +41,14 @@
 	</nav>
 
 	<div class="jumbotron">
-		<form class="container">
+		<form class="container js-form">
 			<p class="lead">Generate a concise Regular Expression.</p>
 
 			<div class="form-group">
 				<label for="words">
 					Words or phrases the Regular Expression should match:
 				</label>
-				<textarea id="words" class="form-control js-words"></textarea>
+				<textarea required id="words" class="form-control js-words"></textarea>
 			</div>
 
 			<div class="form-inline">

demo/styles.css

@@ -3,6 +3,12 @@
 	padding-top: 1em;
 }
 
+input:invalid,
+textarea:invalid,
+select:invalid {
+	border: 2px solid red;
+}
+
 #words {
 	height: 15em;
 }

src/demo.ts

@@ -4,6 +4,7 @@ import { parseString, WhitespaceHandling } from './utils/wordList';
 
 const { Preserve, TrimLeadingAndTrailing } = WhitespaceHandling;
 
+const $form = document.querySelector<HTMLFormElement>('.js-form');
 const $input = document.querySelector<HTMLTextAreaElement>('.js-words');
 const $delimiter = document.querySelector<HTMLSelectElement>('.js-delimiter');
 const $caseSensitive = document.querySelector<HTMLInputElement>('.js-case');
@@ -37,6 +38,10 @@ function displayPattern(pattern: string) {
 }
 
 function onClickGenerate() {
+	if (!$form.reportValidity()) {
+		return;
+	}
+
 	let words = $input.value;
 	const delimiter = $delimiter.selectedOptions[0].value;
 	const isCaseSensitive = $caseSensitive.checked;