started implementing custom form field validation messages

css/css.css

@@ -13,13 +13,12 @@ html body input ~ .ui-invalid-label {
   display: none;
 }
 html body input.invalid ~ .ui-invalid-label {
-  right: 0px;
-  bottom: -1.25em;
+  left: 0;
+  bottom: 0;
+  margin-bottom: -1.35em;
   color: red;
+  font-size: 0.75em;
   display: inline-block;
-  font-size: 0.6em;
-  height: 10px;
-  padding: 0px 1em;
   position: absolute;
 }
 /* ======================== disabled form fields ========================= */

data/network_fieldlist.json

@@ -22,7 +22,7 @@
       "required": true,
       "preserve_whitespace": null,
       "unicode": null,
-      "maximum_length": null,
+      "maximum_length": 10,
       "truncate": null
     },
     "messages": {

js/erp5_loader.js

@@ -3501,6 +3501,7 @@
   // TODO: slider/custom-select/flip
   // TODO: refactor... this is terrible and not flexible at all
   // TODO: placeholder?
+  // TODO: add label et all to span-only?
   factory.formElement = function (config, wrap, label, position) {
     var wrapper, container, wrap_in_container, element_reverse,
       label_inside, label_target, element_target, action, clear,
@@ -3508,6 +3509,7 @@
       label_class_list, index, disabled, active, text, addLabel, readonly,
       mask_set, mask, star, hidden_field, icon;
 
+    // don't make an input, make a span
     if (config.type === "span") {
       return factory.element(
         config.type,
@@ -3529,6 +3531,7 @@
 
     // helper
     addLabel = function (config, label_class_list) {
+      // TODO: WTF find out why testing for r"equire" here...
       star = util.testForString("equire", config.direct.className, true);
 
       return factory.element(
@@ -3623,6 +3626,7 @@
       config.direct.className += " action ";
       config.attributes["data-action-btn"] = "true";
     }
+
     // no clear if readonly/disabled
     if (mask_set === undefined) {
       if (config.logic.clear) {
@@ -3763,6 +3767,14 @@
       config.logic
     ));
 
+    // validation messages
+    element_target.appendChild(factory.element(
+      "span",
+      {"className": "ui-invalid-label"},
+      {},
+      {"text":"wrong"}
+    ));
+
     // checkbox radio gets label after input
     if (label_inside) {
       label_target.appendChild(addLabel(config, label_class_list));
@@ -6090,7 +6102,7 @@
 
         return storage_location.put(
           {"_id": (property_dict.file || app.default_dict.storage_dict.settings)},
-          hacked_view || {}
+          /*hacked_view || */{}
         )
           .then(function () {
             return storage_location.putAttachment({
@@ -6349,18 +6361,22 @@
       if (form_element.getAttribute("data-bound") === null) {
         form_element.setAttribute("data-bound", true);
 
-        // TODO: javascript-able?
         // NOTE: the script is mapped to validval, so replacing it
         // requires it to add a different plugin here as well as
         // updating all data-vv fields being set in mapFormField() and
         // generateFormElement
+
         $(form_element).validVal({
           validate: {
             onKeyup: "valid",
             onBlur: "valid"
           },
+          //customValidations: util.declareJS(),
           form: {
-            onInvalid: util.return_out
+            onInvalid: function (error) {
+              console.log(error);
+              util.return_out();
+            }
           }
         });
       }