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

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index cd80629..1ee8000 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -125,6 +125,34 @@ async function fetch_put_json(api = '', data = {}) {
 class CategoryRequest extends React.Component {
   constructor(props) {
     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;
+
+    /* 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);
   }
 
   render() {
@@ -136,16 +164,16 @@ class CategoryRequest extends React.Component {
           include the number of items for each person to submit.
         </p>
 
-        <form>
+        <form onSubmit={this.handle_submit} >
           <div className="form-field large">
             <input
               type="text"
               id="category"
               placeholder="6 things at the beach"
-              required pattern=".*[0-9]+.*"
-              title="Category must contain a number"
-              >
-            </input>
+              required
+              onChange={this.handle_change}
+              ref={this.category}
+            />
           </div>
 
           <div className="form-field large">