Skip to content

Commit 42275c6

Browse files
mw75knolleary
authored andcommitted
Clarify the validation function while editing a node (#48)
Also replaced the JavaScript syntax hint with the current GitHub backtick notation.
1 parent 1927b79 commit 42275c6

1 file changed

Lines changed: 17 additions & 5 deletions

File tree

docs/creating-nodes/properties.md

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,27 +79,39 @@ If more specific validation is required, the `validate` attribute can be used to
7979
provide a function that will check the value is valid. The function is passed the
8080
value and should return either true or false. It is called within the context of
8181
the node which means `this` can be used to access other properties of the node.
82-
This allows the validation to depend on other property values.
82+
This allows the validation to depend on other property values.
83+
While editing a node the `this` object reflects the current configuration of the
84+
node and **not** the current form element value. The validator function should
85+
try to access the property configuration element and take the `this` object as
86+
fallback to achieve the right user experience.
8387

8488
There is a group of common validation functions provided.
8589

8690
- `RED.validators.number()` - check the value is a number
8791
- `RED.validators.regex(re)` - check the value matches the provided regular
8892
expression
8993

94+
Both methods - `required` attribute and `validate` attribute - are reflected by
95+
the UI in the same way. The missing configuration marker on the node is triggered
96+
and the corresponding input is red surrounded when a value is not valid or missing.
97+
9098

9199
The following example shows how each of these validators can be applied.
92100

93-
{% highlight javascript %}
101+
```javascript
94102
defaults: {
95103
minimumLength: { value:0, validate:RED.validators.number() },
96104
lowerCaseOnly: {value:"", validate:RED.validators.regex(/[a-z]+/) },
97-
custom: { value:"", validate:function(v) { return v.length > this.minimumLength } }
105+
custom: { value:"", validate:function(v) {
106+
var minimumLength=$("#node-input-name").length?$("#node-input-minimumLength").val():this.minimumLength;
107+
return v.length > minimumLength
108+
} }
98109
},
99-
{% endhighlight %}
110+
```
100111

101112
Note how the `custom` property is only valid if its length is greater than the
102-
current value of the `minimumLength` property.
113+
current value of the `minimumLength` property or the value of the minimumLength
114+
form element.
103115

104116
### Property edit dialog
105117

0 commit comments

Comments
 (0)