# Show validation results

**URL:** <https://discourse.nodered.org/t/show-validation-results/36358>\
**Category:** Core Development\
**Created:** [22 November 2020 20:47 UTC](https://discourse.nodered.org/t/show-validation-results/36358 "2020-11-22T20:47:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2020 20:47 UTC](https://discourse.nodered.org/t/show-validation-results/36358/1 "2020-11-22T20:47:13Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fb352da23fe29c4b41022906f6e939eaf449270.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/ddce2ec188b08b9452cada88221e40faa11f11bc.png)

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

> [@Readonly TypedInput](https://discourse.nodered.org/t/readonly-typedinput/35358/11):
>
> @BartButenaers if there are other things like this you stumble over, then please do flag them up. And don't assume I read every post on the forum - if you want my input, mention me directly.

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 November 2020 22:26 UTC](https://discourse.nodered.org/t/show-validation-results/36358/2 "2020-11-22T22:26:00Z")

</div>

Typed inputs will show a red border if you try to tab to the next field or hit enter with invalid data - eg  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03398f2459d15dcfb56e981d83b609add32b9714.png).  
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..

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2020 22:31 UTC](https://discourse.nodered.org/t/show-validation-results/36358/3 "2020-11-22T22:31:06Z")

</div>

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.

> [@BartButenaers](#):
>
> is it better/easier to show the error somewhere else? E.g. via `RED.notify` at the top of the screen

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

![json_typedinput_error](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7be2ea2a24eeaa32f1aae0e4745d1aac92b70976.gif)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2020 22:34 UTC](https://discourse.nodered.org/t/show-validation-results/36358/4 "2020-11-22T22:34:50Z")

</div>

> [@dceejay](#):
>
> I'm not sure we want to add popups for all entry errors and all their translations..

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2020 22:54 UTC](https://discourse.nodered.org/t/show-validation-results/36358/5 "2020-11-22T22:54:11Z")

</div>

> [@BartButenaers](#):
>
> So then I only need to have (somehow?) a red border...

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

```auto
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](https://nodered.org/docs/api/ui/typedInput/#methods-validate) function of the TypedInput.  
Because when I set a `pattern` attribute on the TypedInput, it gets lost. For example:

```auto
$('<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](https://discourse.nodered.org/t/readonly-typedinput/35358/4) attribute). However - besides the `pattern` attribute - the html input contains quite a number of [attributes](https://www.w3schools.com/html/html_form_attributes.asp), 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!

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 November 2020 00:17 UTC](https://discourse.nodered.org/t/show-validation-results/36358/6 "2020-11-23T00:17:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2020 21:39 UTC](https://discourse.nodered.org/t/show-validation-results/36358/7 "2020-11-23T21:39:00Z")

</div>

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

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

```auto
$(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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/40e96f03efb857dc47ad357aa23c1948f54562aa.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1f3dcef4dd15d08fb24d56fa9f48d6446fd5061.gif)

---

<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:** [7 December 2020 21:39 UTC](https://discourse.nodered.org/t/show-validation-results/36358/8 "2020-12-07T21:39:01Z")

</div>

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