X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=1ee8000ab09376e7557b2dcdcdee3d844bde1963;hp=84a35a5eab96f71fd37336ce6f4bcef37312a85b;hb=b0b2d2d5dd5c3bac29537e2f5b206208f0a43898;hpb=a1ed0fc881f3bfe6cc55041fda3b54f7c0baa94b;ds=sidebyside

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 84a35a5..1ee8000 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -127,9 +127,18 @@ class CategoryRequest extends React.Component {
     super(props);
     this.category = React.createRef();
 
+    this.handle_change = this.handle_change.bind(this);
     this.handle_submit = this.handle_submit.bind(this);
   }
 
+  handle_change(event) {
+    const category_input = this.category.current;
+    const category = category_input.value;
+
+    if (/[0-9]/.test(category))
+      category_input.setCustomValidity("");
+  }
+
   handle_submit(event) {
     const category_input = this.category.current;
     const category = category_input.value;
@@ -137,6 +146,12 @@ class CategoryRequest extends React.Component {
     /* Prevent the default page-changing form-submission behavior. */
     event.preventDefault();
 
+    if (! /[0-9]/.test(category)) {
+      category_input.setCustomValidity("Category must include a number");
+      event.currentTarget.reportValidity();
+      return;
+    }
+
     console.log("Do something here with category: " + category);
   }
 
@@ -155,8 +170,8 @@ class CategoryRequest extends React.Component {
               type="text"
               id="category"
               placeholder="6 things at the beach"
-              required pattern=".*[0-9]+.*"
-              title="Category must contain a number"
+              required
+              onChange={this.handle_change}
               ref={this.category}
             />
           </div>