Validation and default popup close

Question

I have created a custom node in node-red

<script type="text/javascript">
    RED.nodes.registerType('project', {
        category: 'My Category',
        color: 'rgb(192, 237, 192)',
        defaults: {
            name: { value: "", required:true },
            project: { value: "", required:true }
        },
        inputs: 0,
        outputs: 1,
        onpaletteadd: function (index) {
            var node = this;
            var sessionStorageData = sessionStorage.getItem(node.z);
            if (sessionStorageData && (JSON.parse(sessionStorageData)).id != node.id) {
                alert("Flow cannot have more then one Project node!!!")
            }
            if (!sessionStorageData) {
                sessionStorageData = { id: node.id }
            } else {
                sessionStorageData = JSON.parse(sessionStorageData);
            }
            sessionStorageData.project = node.project;
            sessionStorage.setItem(node.z, JSON.stringify(sessionStorageData));
        },
        oneditprepare: function (index) {
            var node = this;
            $.ajax({
                type: "GET",
                url: "../getExternalData?path=get",
                dataType: "json",
                success: function (data1) {
                    this.preload = true;
                    var appenddata1 = "";
                    $.each(data1, function (key, val) {
                        appenddata1 += "<option value = '" + key + "'>" + val + " </option>";
                    });
                    $("#node-input-project").append(appenddata1);
                    $("#node-input-project").val(node.project);
                }
            });
        },
        oneditsave: function (index) {
            var node = this;
            var sessionStorageData = sessionStorage.getItem(node.z);
            if (!sessionStorageData) {
                sessionStorageData = { id: node.id }
            } else {
                sessionStorageData = JSON.parse(sessionStorageData);
            }
            sessionStorageData.project = $("#node-input-project").val();
            sessionStorage.setItem(node.z, JSON.stringify(sessionStorageData));
        },
        icon: "cog.png",
        label: function () {
            return this.name || "Project";
        }
    });
</script>

<script type="text/x-red" data-template-name="project">
    <div class="form-row">
            <label for="node-input-name"><i class="icon-tag"></i>Workflow Name</label>
            <input type="text" id="node-input-name" placeholder="Workflow Name"/>
        </div>
    <div class="form-row">
        <label for="node-input-project"><i class="icon-tag"></i> Project</label>
        <select type="text" id="node-input-project">
            <option value=" ">Please select a Project</option>
        </select>
    </div>
</script>

to my surprise required is only making the text box red and is not stopping the popup close on click of Done button, i tried return false in oneditsave but that doesn't help either.

Answer 1

As described in the Node-RED docs on creating nodes, you can add a validate function to the defaults section of the node's html file.

There are 2 built in validators,

• RED.validators.number()
• RED.validators.regex(re)

But you can attach your own function as well:

defaults: {
   minimumLength: { value:0, validate:RED.validators.number() },
   lowerCaseOnly: {value:"", validate:RED.validators.regex(/[a-z]+/) },
   custom: { value:"", validate:function(v) {
      var minimumLength=$("#node-input-minimumLength").length?$("#node-input-minimumLength").val():this.minimumLength;
      return v.length > minimumLength 
   } }
},

But even after using either these or the required: true the user will still be able to hit the Done button. A warning will be shown to the user when they try to deploy a flow that contains nodes that have missing or invalid field values but there is no way to stop a user deploying a flow with bad input data.