Hi all, refreshing my knowledge about processing nodes in the Editor. I seem to be getting some unexpected results when looking at how validation functions for fields in the edit panel are called. Not sure if this has always been this way or it is something new.
Validation fns are run:
- x1 On every node instance when the Editor is loaded (e.g. panel not visible) - value is populated but jQ val is undefined.
- x1 When a new node instance added - value & jq value both
undefined
. - x1 When the config panel is opened for an instance.
- x* When a field value has changed (on keypress) - value & jq value are the same.
- x1 or x2? When a field value has changed (on blur) - value & jq value are the same.
- x1 When field is changed and "Done" is clicked
Having it called on every keypress rather than on-blur seems a little excessive but I can understand it might occasionally be helpful.
However - It is also called when you make changes to a different field!
As you can see from the screen recording, though field validation is only set on the topic field, if you make changes to the name field it is still triggering a re-validation. This can't be right can it? It would surely be very inefficient, especially if the field validation needed to be intensive.
This is the script in the test node:
/** Validate the topic input - this is called on Editor load, panel open, as well as on change
* @param {*} value The input value to be validated
* @returns {boolean} True if valid
*/
function validateTopic(value) {
// As this is called on Editor load, when panel opened AND when a change made
// you may want to do things only when the panel is open (visible)
if ($('#node-input-topic').is(':visible')) {
console.log('#node-input-topic IS VISIBLE. ', `Changed? '${this.changed}'.`, `Value: '${value}'.`, `this.topic: '${this.topic}'.`, `jQ value: ${$('#node-input-topic').val()}.`)
} else {
console.log('#node-input-topic IS NOT VISIBLE. ', `Changed? '${this.changed}'.`, `Value: '${value}'.`, `this.topic: '${this.topic}'.`, `jQ value: ${$('#node-input-topic').val()}.`)
}
return true
}
/** Prep for edit
* @param {*} node A node instance as seen from the Node-RED Editor
*/
function onEditPrepare(node) {
// log.log('onEditPrepare', node)
tiTestbed.doTooltips('#ti-edit-panel') // Do this at the end
} // ----- end of onEditPrepare() ----- //
// @ts-ignore
RED.nodes.registerType(moduleName, {
// NOTE: Validations are called on Editor load, not just on change
defaults: {
name: { value: '' },
topic: { value: '', validate: validateTopic },
},
align: 'left',
inputs: 1,
inputLabels: 'Some Input',
outputs: 1,
outputLabels: ['Output 1'],
icon: 'font-awesome/fa-code',
label: function () {
return this.name || moduleName
},
category: tiTestbed.paletteCategory,
color: 'var(--ti-testbed-node-colour)',
paletteLabel: moduleName,
/** Prepares the Editor panel */
oneditprepare: function () { onEditPrepare(this) },
}) // ---- End of registerType() ---- //