Show validation results

Core Development
1

Hi folks,

Suppose a user has entered invalid input in a TypedInput field, are there any ways to visualize what he did wrong?

For example when I enter an incorrect email address in the json editor:

image

Then I would like to make the error visible (instead of hiding the TypedInput and accepting the incorrect value). For example similar to standard html input validation (but without submitting a form):

image

But I have a number of questions:

  • Does perhaps anything already exists in Node-RED? Can't remember to have seen something like that...
  • Is that the best way to do it, or is it better/easier to show the error somewhere else? E.g. via RED.notify at the top of the screen. However then it is not visible anymore to which input field the error is related... And there can be multiple input fields which have incorrect values ...
  • Not sure whether this should be part of the TypedInput, because - to make it reusable for developers to use it on their config screens - should it be available also for standard input fields (which are not TypedInputs)?
  • ...

Thanks !!!!
Bart

Hey @knolleary, mentioning you here because it is related to my attempt to update the JSON editor ...

2

Typed inputs will show a red border if you try to tab to the next field or hit enter with invalid data - eg
image.
this is same as the validation function for other config fields - but the user does have to take an action to move away from the field - it doesn't continuously validate while they enter. I'm not sure we want to add popups for all entry errors and all their translations..

3

Hi Dave,
I'm not sure whether I can use that in the Json editor for two reasons:

  • The TypedInput will be removed, once you leave it.
  • I don't think that I have a validation function? But not sure.

This is how it looks like if I use RED.notify:

json_typedinput_error

4

I have to agree on that ... So then I only need to have (somehow?) a red border...

5

Currently I validate the value of the TypedInput myself, for example:

var typedInputValue = val.typedInput("value");
if (!/^some_regex_for_email/i.test(typedInputValue)) {
   // Invalid email address
}

And then I would have to apply the red border myself.

I do it currently like that because I'm not sure how the TypedInput could do the validation on its own, when I would call the validate function of the TypedInput.
Because when I set a pattern attribute on the TypedInput, it gets lost. For example:

$('<input type="text" pattern="some_regex_for_email">').typedInput(typedInput);

I could create a PR for a new 'pattern' function on the TypedInput (identical to how @Steve-Mcl did it for the disabled attribute). However - besides the pattern attribute - the html input contains quite a number of attributes, so not sure whether it is wise/advised to add them all to the TypedInput widget (especially since the attributes differ per value type).

So not sure what is the best way to validate the TypedInput, and get a red border around it...
Any tips are appreciated!

6

Funnily enough I hit this last week for a new feature I'm working on where I wanted to provide an inline hint as to what was wrong with the field rather than just highlight it. (You highlight an input by giving it the class input-error)

In the end I didn't address that part as it was a rabbit hole waiting for me to fall in.

But I do think it's a design pattern we should have an answer for. Whether that's adding a popup or similar when the field is focussed, or some other approach I don't know.

As for having custom validation of a TypedInput - I'll take a look at that as well.

1 Like
7

Grrr, CSS is not my BFF ...
Anyway after the following changes, I got it working :champagne:

In my first attempt, I always had to click twice outside of the TypedInput to get the red border.

$(document).on("mousedown.nr-ui-json-editor", function(evt) {
   if (isItemValueValid(item, valValue)) {
      typedInputElement.removeClass("input-error");
   }
   else {
      typedInputElement.addClass("input-error");
      return;
}

When looking at the CSS, it 'seemed' a focus issue to me:

image

Calling typedInputElement.focus() did not result a focus on the element, so no solution. But then I realized that it might be an event order issue: mousedown -> focus -> mouseup -> click

And indeed after I changed the (existing) event to click.nr-ui-json-editor, it was finally working:

json_editor_email

1 Like
8

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