diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index 30c329c41..09beb6e6f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -256,33 +256,58 @@ RED.editor = (function() { } } - function validateNodeEditorProperty(node,defaults,property,prefix) { - var input = $("#"+prefix+"-"+property); + /** + * Called when an input in the edit box changes. + * + * Marks the input as error (red field) if the input's value is invalid. + * If the validation function returns a String, a tooltip will be attached to the input + * like that the user can see the error message. + */ + function validateNodeEditorProperty(node, defaults, property, prefix) { + let input = $("#"+prefix+"-"+property); if (input.length > 0) { - var value = input.val(); + let value = input.val(); if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") { value = input.text(); } else if (input.attr("type") === "checkbox") { value = input.prop("checked"); } - var valid = validateNodeProperty(node, defaults, property,value); + // Check if the input is a typeField + if (input.attr("type") === "hidden") { + const typedInput = input.closest("div").find("input[class='red-ui-typedInput']"); + const typeField = typedInput.data("noderedTypedInput")?.typeField; + const isTypeField = input.is(typeField); + if (isTypeField) { + // If typeField, must retrieve the typedInput to add the `input-error` class + input = typedInput; + } + } + // If it's a typedInput and the node has no validator for this property, let's validate by typedInput + if (input.hasClass("red-ui-typedInput") && !defaults[property].validate) { + return; + } + const valid = validateNodeProperty(node, defaults, property, value); + // If the input is invalid if (((typeof valid) === "string") || !valid) { input.addClass("input-error"); input.next(".red-ui-typedInput-container").addClass("input-error"); if ((typeof valid) === "string") { - var tooltip = input.data("tooltip"); + let tooltip = input.data("tooltip"); if (tooltip) { + // If the input has a tooltip, just modify the content tooltip.setContent(valid); - } - else { - tooltip = RED.popover.tooltip(input, valid); + } else { + // If the input is typed => attach the tooltip to the wrap + const typedInput = input.next(".red-ui-typedInput-container").find(".red-ui-typedInput-input-wrap"); + const target = typedInput.length > 0 ? typedInput : input; + tooltip = RED.popover.tooltip(target, valid); input.data("tooltip", tooltip); } } } else { input.removeClass("input-error"); input.next(".red-ui-typedInput-container").removeClass("input-error"); - var tooltip = input.data("tooltip"); + const tooltip = input.data("tooltip"); if (tooltip) { input.data("tooltip", null); tooltip.delete();