Adds a new validation framework and an example in Features. (#1769)

* Adds a new validation framework and an example in Features.

- Using the new validation, we can apply form validation to all modals
and other places.
- The Features has been updated to have an example of how to use this
new validation including a new validation.js with the common rules for
add/edit modals.
- There is still work to be done in the handling of updates and
submissions but this should get us close enough for now.

* Removes debugging statement

* Removes old data modal handler

* Preserves the original onfocusout functionality.

* Adds documentation and usage example

* Fixes linting

* Fixes linting II...the relintining

* Fixes linting again..

package.json

@@ -80,6 +80,7 @@
     "html-webpack-plugin": "^2.30.1",
     "jquery": "^3.2.1",
     "jquery-ui": "^1.12.1",
+    "jquery-validation": "^1.17.0",
     "knockout": "~3.3.0",
     "knockout-mapping": "^2.6.0",
     "less": "^2.7.2",

src/bin/knockout-validation.js

@@ -0,0 +1,41 @@
+import $ from 'jquery';
+import ko from 'knockout';
+import 'jquery-validation';
+
+/**
+* Binds a form element to use jQuery validation tools
+* The argument should be a an object of settings from jQuery Validate.
+*
+* jQuery Validation Docs:
+* https://jqueryvalidation.org/validate/
+*
+* Usage Example
+* -------------
+*  <form class="form-horizontal" data-bind="validate: validationSettings">
+*    <!-- Inputs in a validated form must have a name. -->
+*    <input name="name" value="" type="text" />
+*    <!-- Either buttons or input[type=submit] works fine.. -->
+*    <input type="submit" value="Add" />
+*  </form>
+*
+*/
+ko.bindingHandlers.validate = {
+    init: (element, valueAccessor) => {
+        const value = valueAccessor();
+
+        // Add a new handler callback that adds the form as a param for
+        // checking overall validity.
+        // Preserve the old onfocusout in case it was being used.
+        value.ogonfocusout = value.onfocusout;
+        value.onfocusout = (input, event) => {
+            if (value.updateHandler) {
+                value.updateHandler($(element), input);
+            }
+            if (value.ogonfocusout) {
+                value.ogonfocusout(input, event);
+            }
+        };
+
+        $(element).validate(ko.unwrap(value));
+    }
+};

src/charactersheet/init.js

@@ -1,3 +1,4 @@
+import 'bin/knockout-validation';
 import {
     AuthenticationServiceManager,
     ChatServiceManager,

src/charactersheet/viewmodels/character/features/index.html

@@ -65,14 +65,15 @@
             id="addFeatureLabel">Add a new Feature.</h4>
       </div>
       <div class="modal-body">
-        <form class="form-horizontal">
+        <form class="form-horizontal" data-bind="validate: validation">
           <div class="form-group ui-front">
             <label for="name" class="col-sm-2 control-label">Name</label>
               <div class="col-sm-10">
                 <input type="text"
                         class="form-control"
                         id="featureAddNameInput"
                         placeholder="Rage"
+                        name="name"
                         data-bind='textInput: blankFeature().name,
                         autocomplete: { source: featuresPrePopFilter,
                         onselect: populateFeature }, hasFocus: firstModalElementHasFocus'>
@@ -159,11 +160,11 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button"
+            <button type="submit"
                     class="btn btn-primary"
                     id="featureAddAddButton"
-                    data-bind='click: addFeature'
-                    data-dismiss="modal">Add</button>
+                    data-bind='disable: !addFormIsValid()'
+                    >Add</button>
             <p class="text-muted text-left" data-bind='visible: shouldShowDisclaimer'>
               <sm><i>This data is distributed under the
                 <a href='http://media.wizards.com/2016/downloads/DND/SRD-OGL_V5.1.pdf'

src/charactersheet/viewmodels/character/features/index.js

@@ -19,6 +19,7 @@ import ko from 'knockout';
 import meditation from 'images/meditation.svg';
 import template from './index.html';
 import uuid from 'node-uuid';
+import validation from './validation';
 
 export function FeaturesViewModel() {
     var self = this;
@@ -46,6 +47,7 @@ export function FeaturesViewModel() {
     self.editTabStatus = ko.observable('');
     self.firstModalElementHasFocus = ko.observable(false);
     self.editFirstModalElementHasFocus = ko.observable(false);
+    self.addFormIsValid = ko.observable(false);
     self.meditation = meditation;
     self.campingTent = campingTent;
 
@@ -209,9 +211,24 @@ export function FeaturesViewModel() {
     self.trackedPopoverText = function() {
         return 'Tracked Features are listed in the Tracker.';
     };
+
+    // Validation
+
+    self.validation = {
+        submitHandler: (form) => {
+            self.addFeature();
+        },
+        updateHandler: ($element) => {
+            self.addFormIsValid($element.valid());
+        },
+        rules: validation.rules,
+        messages: validation.messages
+    };
 }
 
 ko.components.register('features', {
     viewModel: FeaturesViewModel,
     template: template
 });
+
+

src/charactersheet/viewmodels/character/features/validation.js

@@ -0,0 +1,10 @@
+export default {
+    rules: {
+        name: {
+            required: true
+        }
+    },
+    messages: {
+//         name: "Please give me your name...",
+    }
+};