Problem with validation in ui

Developing Nodes
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.