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 84a35a5eab96f71fd37336ce6f4bcef37312a85b..1ee8000ab09376e7557b2dcdcdee3d844bde1963 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -127,9 +127,18 @@ class CategoryRequest extends React.Component {
     super(props);
     this.category = React.createRef();
 
     super(props);
     this.category = React.createRef();
 

+    this.handle_change = this.handle_change.bind(this);

     this.handle_submit = this.handle_submit.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;
   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();
 
     /* 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);
   }
 
     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"
               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>
               ref={this.category}
             />
           </div>