@yuneta/gobj-ui 7.6.1 → 7.7.1

package/dist/gobj-ui.cjs.js

@@ -6951,26 +6951,13 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				"",
 				{
 					"invalid": function(evt) {
-						this.classList.add("is-danger");
-						let $h = this.parentNode.querySelector(".help");
-						$h.textContent = this.validationMessage;
-						$h.style.display = "block";
+						mark_field_validity(this);
 					},
 					"input": function(evt) {
 						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
 					},
 					"blur": function(evt) {
-						if (!this.checkValidity()) {
-							this.classList.add("is-danger");
-							let $h = this.parentNode.querySelector(".help");
-							$h.textContent = this.validationMessage;
-							$h.style.display = "block";
-						} else {
-							this.classList.remove("is-danger");
-							let $h = this.parentNode.querySelector(".help");
-							$h.textContent = "";
-							$h.style.display = "none";
-						}
+						mark_field_validity(this);
 					}
 				}
 			]);
@@ -7485,6 +7472,44 @@ function template2columns(gobj, columns, template, sub_elements) {
 	return columns;
 }
 /************************************************************
+*  What is wrong with a field, in the APP's language.
+*
+*  `input.validationMessage` is the BROWSER's sentence in the BROWSER's
+*  locale: a Spanish form on an English Firefox says "Please fill out
+*  this field." and no i18n reaches it. The one case worth owning is
+*  the empty required field — by far the common one — and the rest
+*  falls back to the browser, whose wording for a bad pattern or an
+*  out-of-range number is more precise than anything generic here.
+************************************************************/
+function field_validation_message($input) {
+	let v = $input.validity;
+	if (v && v.valueMissing) return (0, i18next.t)("this field is required");
+	return $input.validationMessage;
+}
+/************************************************************
+*  Mark a field as wrong, or clear the mark. One place: the same
+*  three lines lived in the `invalid` and `blur` handlers of every
+*  field kind.
+************************************************************/
+function mark_field_validity($input) {
+	let $h = $input.parentNode ? $input.parentNode.querySelector(".help") : null;
+	let v = $input.validity;
+	if (!v || v.valid) {
+		$input.classList.remove("is-danger");
+		if ($h) {
+			$h.textContent = "";
+			$h.style.display = "none";
+		}
+		return true;
+	}
+	$input.classList.add("is-danger");
+	if ($h) {
+		$h.textContent = field_validation_message($input);
+		$h.style.display = "block";
+	}
+	return false;
+}
+/************************************************************
 *
 ************************************************************/
 function validate_form(gobj, $form) {
@@ -7944,7 +7969,7 @@ function form_value_2_treedb_value(gobj, field_desc, value) {
 function ac_window_to_close(gobj, event, kw, src) {
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "changes")) {
 		kw.abort_close = true;
-		kw.warning = "All changes will be lost. Are you sure?";
+		kw.warning = "all changes will be lost";
 	}
 	return 0;
 }
@@ -7971,10 +7996,16 @@ function ac_save_record(gobj, event, kw, src) {
 		let values = get_form_values(gobj, $form);
 		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_SAVE_RECORD", values);
 		set_changed_stated(gobj, false);
-	} else {
-		kw.abort_close = true;
-		kw.warning = "Cannot save with wrong fields";
+		return 0;
+	}
+	try {
+		$form.reportValidity();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot report the form's validity: ${e}`);
 	}
+	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
+		mark_field_validity($input);
+	});
 	return 0;
 }
 /************************************************************
@@ -17247,7 +17278,7 @@ function form_may_close(gobj) {
 		let kw = {};
 		(0, _yuneta_gobj_js.gobj_send_event)(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
 		if (kw.abort_close) {
-			yui_shell_confirm_yesnocancel(yui_shell_of(gobj), "All changes will be lost. Are you sure?", {
+			yui_shell_confirm_yesnocancel(yui_shell_of(gobj), kw.warning || "all changes will be lost", {
 				t: i18next.t,
 				yes_label: "yes",
 				no_label: "no",

package/dist/gobj-ui.es.js

@@ -6946,26 +6946,13 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				"",
 				{
 					"invalid": function(evt) {
-						this.classList.add("is-danger");
-						let $h = this.parentNode.querySelector(".help");
-						$h.textContent = this.validationMessage;
-						$h.style.display = "block";
+						mark_field_validity(this);
 					},
 					"input": function(evt) {
 						gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
 					},
 					"blur": function(evt) {
-						if (!this.checkValidity()) {
-							this.classList.add("is-danger");
-							let $h = this.parentNode.querySelector(".help");
-							$h.textContent = this.validationMessage;
-							$h.style.display = "block";
-						} else {
-							this.classList.remove("is-danger");
-							let $h = this.parentNode.querySelector(".help");
-							$h.textContent = "";
-							$h.style.display = "none";
-						}
+						mark_field_validity(this);
 					}
 				}
 			]);
@@ -7480,6 +7467,44 @@ function template2columns(gobj, columns, template, sub_elements) {
 	return columns;
 }
 /************************************************************
+*  What is wrong with a field, in the APP's language.
+*
+*  `input.validationMessage` is the BROWSER's sentence in the BROWSER's
+*  locale: a Spanish form on an English Firefox says "Please fill out
+*  this field." and no i18n reaches it. The one case worth owning is
+*  the empty required field — by far the common one — and the rest
+*  falls back to the browser, whose wording for a bad pattern or an
+*  out-of-range number is more precise than anything generic here.
+************************************************************/
+function field_validation_message($input) {
+	let v = $input.validity;
+	if (v && v.valueMissing) return t("this field is required");
+	return $input.validationMessage;
+}
+/************************************************************
+*  Mark a field as wrong, or clear the mark. One place: the same
+*  three lines lived in the `invalid` and `blur` handlers of every
+*  field kind.
+************************************************************/
+function mark_field_validity($input) {
+	let $h = $input.parentNode ? $input.parentNode.querySelector(".help") : null;
+	let v = $input.validity;
+	if (!v || v.valid) {
+		$input.classList.remove("is-danger");
+		if ($h) {
+			$h.textContent = "";
+			$h.style.display = "none";
+		}
+		return true;
+	}
+	$input.classList.add("is-danger");
+	if ($h) {
+		$h.textContent = field_validation_message($input);
+		$h.style.display = "block";
+	}
+	return false;
+}
+/************************************************************
 *
 ************************************************************/
 function validate_form(gobj, $form) {
@@ -7939,7 +7964,7 @@ function form_value_2_treedb_value(gobj, field_desc, value) {
 function ac_window_to_close(gobj, event, kw, src) {
 	if (gobj_read_bool_attr(gobj, "changes")) {
 		kw.abort_close = true;
-		kw.warning = "All changes will be lost. Are you sure?";
+		kw.warning = "all changes will be lost";
 	}
 	return 0;
 }
@@ -7966,10 +7991,16 @@ function ac_save_record(gobj, event, kw, src) {
 		let values = get_form_values(gobj, $form);
 		gobj_publish_event(gobj, "EV_SAVE_RECORD", values);
 		set_changed_stated(gobj, false);
-	} else {
-		kw.abort_close = true;
-		kw.warning = "Cannot save with wrong fields";
+		return 0;
+	}
+	try {
+		$form.reportValidity();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot report the form's validity: ${e}`);
 	}
+	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
+		mark_field_validity($input);
+	});
 	return 0;
 }
 /************************************************************
@@ -17242,7 +17273,7 @@ function form_may_close(gobj) {
 		let kw = {};
 		gobj_send_event(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
 		if (kw.abort_close) {
-			yui_shell_confirm_yesnocancel(yui_shell_of(gobj), "All changes will be lost. Are you sure?", {
+			yui_shell_confirm_yesnocancel(yui_shell_of(gobj), kw.warning || "all changes will be lost", {
 				t,
 				yes_label: "yes",
 				no_label: "no",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.6.1",
+  "version": "7.7.1",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.js

@@ -1168,26 +1168,13 @@ function create_form_field(
             }
             let extend = ['input', attrs, '', {
                 'invalid': function (evt) {
-                    this.classList.add('is-danger');
-                    let $h = this.parentNode.querySelector('.help');
-                    $h.textContent = this.validationMessage;
-                    $h.style.display = 'block';
+                    mark_field_validity(this);
                 },
                 'input': function (evt) {
                     gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
                 },
                 'blur': function (evt) {
-                    if (!this.checkValidity()) {
-                        this.classList.add('is-danger');
-                        let $h = this.parentNode.querySelector('.help');
-                        $h.textContent = this.validationMessage;
-                        $h.style.display = 'block';
-                    } else {
-                        this.classList.remove('is-danger');
-                        let $h = this.parentNode.querySelector('.help');
-                        $h.textContent = '';
-                        $h.style.display = 'none';
-                    }
+                    mark_field_validity(this);
                 }
             }];
 
@@ -1976,6 +1963,61 @@ function template2columns(gobj, columns, template, sub_elements)
     return columns;
 }
 
+/************************************************************
+ *  What is wrong with a field, in the APP's language.
+ *
+ *  `input.validationMessage` is the BROWSER's sentence in the BROWSER's
+ *  locale: a Spanish form on an English Firefox says "Please fill out
+ *  this field." and no i18n reaches it. The one case worth owning is
+ *  the empty required field — by far the common one — and the rest
+ *  falls back to the browser, whose wording for a bad pattern or an
+ *  out-of-range number is more precise than anything generic here.
+ ************************************************************/
+function field_validation_message($input)
+{
+    let v = $input.validity;
+    if(v && v.valueMissing) {
+        return t("this field is required");
+    }
+    return $input.validationMessage;
+}
+
+/************************************************************
+ *  Mark a field as wrong, or clear the mark. One place: the same
+ *  three lines lived in the `invalid` and `blur` handlers of every
+ *  field kind.
+ ************************************************************/
+function mark_field_validity($input)
+{
+    let $h = $input.parentNode? $input.parentNode.querySelector('.help') : null;
+
+    /*  `validity.valid`, NEVER `checkValidity()`.
+     *
+     *  checkValidity() FIRES the `invalid` event, and this function is what
+     *  that event's handler calls: one asks the other for ever. It cost a
+     *  page full of "too much recursion" the first time Save reported a bad
+     *  field. Reading `validity` asks the same question and fires nothing.
+     *  A control with no `validity` (a wrapper div) is not invalid.  */
+    let v = $input.validity;
+    let ok = !v || v.valid;
+
+    if(ok) {
+        $input.classList.remove('is-danger');
+        if($h) {
+            $h.textContent = '';
+            $h.style.display = 'none';
+        }
+        return true;
+    }
+
+    $input.classList.add('is-danger');
+    if($h) {
+        $h.textContent = field_validation_message($input);
+        $h.style.display = 'block';
+    }
+    return false;
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -2718,7 +2760,11 @@ function ac_window_to_close(gobj, event, kw, src)
 {
     if(gobj_read_bool_attr(gobj, "changes")) {
         kw.abort_close = true; // Don't close the window until fields repaired
-        kw.warning = "All changes will be lost. Are you sure?";
+        /*  An i18n KEY, not a sentence: the dialog renders its message with
+         *  `i18n: message`. The English sentence that was here was a key
+         *  nobody had defined, so it rendered as itself in every language —
+         *  and no locale validator can see a key that travels as data. */
+        kw.warning = "all changes will be lost";
     }
     return 0;
 }
@@ -2754,11 +2800,32 @@ function ac_save_record(gobj, event, kw, src)
         let values = get_form_values(gobj, $form);
         gobj_publish_event(gobj, "EV_SAVE_RECORD", values);
         set_changed_stated(gobj, false);
+        return 0;
+    }
 
-    } else {
-        kw.abort_close = true; // Don't close the window until fields repaired
-        kw.warning = "Cannot save with wrong fields";
+    /*  Pressing Save on a form with a bad field used to do NOTHING: the
+     *  `abort_close` / `warning` this branch set were written on the click's
+     *  own kw, which nobody reads — that pair belongs to the close path, not
+     *  to this one. The button looked broken.
+     *
+     *  reportValidity() is what the form owed the reader: it fires `invalid`
+     *  on EVERY bad field (so all of them get marked, not just the one last
+     *  touched) and puts the caret and the viewport on the first, which on a
+     *  long form is the difference between "it did nothing" and "it is that
+     *  one, up there".  */
+    try {
+        $form.reportValidity();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot report the form's validity: ${e}`);
     }
+
+    /*  reportValidity() stops at the first field the BROWSER validates, and
+     *  the nested tables validate themselves; mark every input we own so the
+     *  count of red fields is the true one. */
+    $form.querySelectorAll('.yui-form-data-input').forEach(($input) => {
+        mark_field_validity($input);
+    });
+
     return 0;
 }
 

package/src/c_yui_treedb_topic_with_form.js

@@ -1527,9 +1527,14 @@ function form_may_close(gobj)
         let kw = {};
         gobj_send_event(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
         if(kw.abort_close) {
+            /*  The message the FORM returned, not a copy of it. The dialog
+             *  takes its message as an i18n KEY, so a second literal here is
+             *  a second key to define — and the one that was here had never
+             *  been defined in any locale, which renders as the English
+             *  sentence itself, in every language, for ever. */
             yui_shell_confirm_yesnocancel(
                 yui_shell_of(gobj),
-                'All changes will be lost. Are you sure?',
+                kw.warning || "all changes will be lost",
                 {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
             ).then(function(answer) {
                 if(answer === "yes" && priv.form_modal) {