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 cd8062959ec67cab269d4e95db44c3167f0e49e2..1ee8000ab09376e7557b2dcdcdee3d844bde1963 100644 (file)
--- 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);
 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() {
   }
 
   render() {


@@ -136,16 +164,16 @@ class CategoryRequest extends React.Component {
           include the number of items for each person to submit.
         </p>
 
           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"
           <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">
           </div>
 
           <div className="form-field large">