Take control over the wording of the validation message for category

[lmno.games] / empathy / empathy.jsx

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 9ebe9f3c7a7b4afd604ee3159cc35ea7348a1677..1ee8000ab09376e7557b2dcdcdee3d844bde1963 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -122,36 +122,70 @@ async function fetch_put_json(api = '', data = {}) {
   return fetch_method_json('PUT', api, data);
 }
 
   return fetch_method_json('PUT', api, data);
 }
 

-function CategoryRequest(props) {
-  return (
-    <div className="category-request">
-      <h2>Submit a Category</h2>
-      <p>
+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() {
+    return (
+      <div className="category-request">
+        <h2>Submit a Category</h2>
+        <p>

           Suggest a category to play with your friends. Don't forget to
           include the number of items for each person to submit.
           Suggest a category to play with your friends. Don't forget to
           include the number of items for each person to submit.

-      </p>
-
-      <form>
-        <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>
-        </div>
-
-        <div className="form-field large">
-          <button type="submit">
-            Send
-          </button>
-        </div>
-
-      </form>
-    </div>
-  );
+        </p>
+
+        <form onSubmit={this.handle_submit} >
+          <div className="form-field large">
+            <input
+              type="text"
+              id="category"
+              placeholder="6 things at the beach"
+              required
+              onChange={this.handle_change}
+              ref={this.category}
+            />
+          </div>
+
+          <div className="form-field large">
+            <button type="submit">
+              Send
+            </button>
+          </div>
+
+        </form>
+      </div>
+    );
+  }

 }
 
 class Game extends React.Component {
 }
 
 class Game extends React.Component {