# Custom node - property validation isn't reflected in the editor UI

**URL:** <https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200>\
**Category:** Developing Nodes\
**Tags:** editor\
**Created:** [18 October 2022 10:09 UTC](https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200 "2022-10-18T10:09:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [18 October 2022 10:09 UTC](https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200/1 "2022-10-18T10:09:54Z")

</div>

Hello, I'm having an issue with my property validation when setting up the editor UI. My invalid input does not have a red border around it and the code I set up to toggle a validation message for the URL field does not run. Inside my node HTML I have this:

```auto
<script type="text/html" data-template-name="custom-node">
<div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name" />
        <input type="hidden" id="node-input-name-type" />
    </div>
    <div class="form-row">
        <label for="node-input-url"><i class="fa fa-globe"></i> URL</label>
        <input type="text" id="node-input-url" placeholder="https://example.com/file.wasm" />
        <input type="hidden" id="node-input-url-type" />
    </div>
    <div class="form-row form-tips" id="node-validation-url" style="display:none;">
        <b>ℹ️</b> This must be a valid URL
    </div>
</script>

```

I think this is fine as it is at the moment. My `oneditprepare` function looks like this:

```auto
oneditprepare: function () {
            let strs = ["name", "url"];

            /*
             * Set up the input types for strings
             * with optional validation if a message element is present
             */
            const addValidation = (el) => {
                let id = el.id;
                let validationEl = document.getElementById(`node-validation-${id}`);
                if (validationEl) {
                    console.log("Adding validation check for", id);
                    el.on("input", function (event, type, value) {
                        let isValid = el.typedInput("validate");
                        console.log("input ", id, "valid:", isValid);
                        validationEl.style.display = isValid ? "none" : "block";
                    });
                }
            };

            for (let id of strs) {
                let el = $(`#node-input-${id}`).typedInput({
                    type: "str",
                    types: ["str"],
                    typeField: `#node-input-${id}-type`,
                });
                addValidation(el);
            }
}

```

The `validate` function for the URL looks like this:

```auto
function (v) {
                    //check it is a valid URL.
                    try {
                        let u = new URL(v);
                        console.log(v, "is a valid url", u);
                        return true;
                    } catch (e) {
                        console.log("url NOT valid for", `'${v}'`, e);
                        return false;
                    }
}

```

The idea is that it's set up to allow for more than just string-typed inputs later on. The questions I have are:

- Is the `typedInput()` call inside the `for` loop the correct way to ensure inputs are typed?
- Can you see any issues in the `addValidation`?

The node and properties appear in the interface, but the red border I'm expecting around the URL field never appears. The `console.log` calls I've added appear for the `validate` function but not for the `input` event listeners, but I can't work out why.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 October 2022 11:04 UTC](https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200/2 "2022-10-18T11:04:44Z")

</div>

Why are you not using the API methods instead of "rolling your own"?

Does it not work setting the `validate` function in the object entry & then, if needs be, calling the `validate` function on the typedInput E.G: `isValid = $(".input").typedInput('validate');`

See here: [TypedInput Widget : Node-RED](https://nodered.org/docs/api/ui/typedInput/#types-typedefinition)

> | Property | Type | Required | Description |
> | --- | --- | --- | --- |
> | validate | function | | A function to validate the value for the type. |

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [30 October 2022 13:28 UTC](https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200/3 "2022-10-30T13:28:15Z")

</div>

Apologies for not getting back to you sooner. My solution for the moment has been to hard-code the options into independent nodes, such that each one doesn't need any individual configuration.

The idea behind my original code was to set up a generic, reproducible function that would display/toggle an associated `node-validation-X` element if the input is invalid, but only if that message exists in the HTML, as well as highlighting the input with the red border. That way I can focus on constructing HTML for new nodes, rather than copy/pasting validation checks. I suspect my event handler is interrupting the default check though so I'll have to take another look at the docs or find a working example on the forum

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 December 2022 13:28 UTC](https://discourse.nodered.org/t/custom-node-property-validation-isnt-reflected-in-the-editor-ui/69200/4 "2022-12-29T13:28:32Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.