Problem with validation in ui

Developing Nodes
1

Hi
I need some help with editor validation- specifically a dynamically populated select.
The select is populated by calling an endpoint in the backend (defined using RED.httpadmin...) in oneditprepare.
There is a default value returned which is a message to prompt the user to select an option.

My requirement:

  1. for a freshly dropped node, there is no existing selected value. When the editor UI comes up (on double clicking the added node), the oneditprepare function selects the first element which is the message prompt to the user. In this case the validation for the select property should flag an error- the select should have the error class (the red border) and the node should have a red error marker. When the user selects a value, it should pass validation and the error class and error marker should be removed. The backend could return a set of values which does not include the current user selected bird- in this case the UI should default the selection to the user prompt and show the error class/marker. My problem: the call to validate should happen after the call to oneditprepare but it seems to ahppen the other way around (i saw this from the console logs). Is there something I am doing wrong? Is there some way to force validate to be called again after oneditprepare?

My test project is at https://github.com/umasudhan/node-red-editor-test if anyone wants to try this out.

Thanks for your time
Uma

2

I think that you simply need to include the drop-down entry that asks the user to select in the static html so that there is an entry there. Then your validation function has an entry to work with before the API call has finished.

3

Thats a good point Julian- however the problem would still remain- the validation function is not triggered after the API call has finished. I would expect the validation to kick in when there is any change to the UI- programatically or via user interaction. Please advise if I am missing something

4

Might be me missing something but surely the flow is (this is the first time through):

  • Panel opens with default entry or previously entered entry
  • You call the API to get the updated list
  • The user accesses the drop-down. Either it is already populated because the API call finished or they have to wait.
  • The user chooses a new option, validation function fires
  • If the user accepts the config without changing the drop-down from the default dummy value, then the validation function marks the config as invalid. If it is anything else, then all is good.

The point is that you don't rely on your API to provide the default unless there is absolutely no alternative otherwise you will often face this issue. Validation is simply whether the end value is the pre-defined default or something else.

5

Thanks Julian- will give this a try and get back to you

6

Hi Julian
That didnt really work for me. I have updated my test project at https://github.com/umasudhan/node-red-editor-test so that the default option is populated in the ui rather than coming from the backend.
steps:

  1. drag a test validation node onto the editor
  2. open the ui- the default option is select a bird- note that this has not been marked as an error when it should have been- the console logs show that validate has been called before oneditprepare which shouldnt be the case
  3. select an option and then click deploy.
  4. open the ui again- the backend now returns a list with the selected item missing- the default option is selected asking the user to select. Note again that the valdiate function has been called before oneditprepare and so does not flag this as an error.
    Thanks for your time- much appreciated.
7

Your select still has no default entry so is always null at startup isn't it?

Also, since you haven't specified your variable as required, that is why it isn't giving an error.

You can simplify things a lot:

birdName :{
    value:'',
    required: true,
    validate: function(v) {
        return v.length > 0
    },
},

<div class="form-row" id="bird-div">
    <label for="node-input-birdName"><i class="fa fa-link"></i> Bird Name</label>
    <select id="node-input-birdName">
        <option value="" selected>--Please choose an option--</option>
    </select>
</div>

So, the process should be:

  • Make the field required: true
  • Simplify the validation and just check for a value of zero length (invalid).
  • Add the default option tag and make sure that it's value is an empty string and that it is the default. As shown above.
  • Call the API to populate the drop-down as early as possible in the oneditprepare function so that it is more likely to be ready when a user gets to it.

Also note that you are using an ES6 function specifier and you should only do that if you are absolutely certain that you only need to support newish browsers. It won't work on some slightly older mobile browsers nor on IE11. Personally, I stick to ES5 for anything that happens in the browser.

8

Hi Julian
Thanks a lot for your help- I managed to get it to work as I wanted finally :slight_smile:
I have updated https://github.com/umasudhan/node-red-editor-test with my latest changes- there is one hack I had to put in- the select had an error even when there was a valid selection- am explicitly remving the error class in this case. Thanks also for your point regarding IE- will stay away from arrow functiosn in the UI
Thanks again

1 Like