# Validate an editableList

**URL:** <https://discourse.nodered.org/t/validate-an-editablelist/27864>\
**Category:** Developing Nodes\
**Created:** [5 June 2020 21:56 UTC](https://discourse.nodered.org/t/validate-an-editablelist/27864 "2020-06-05T21:56:37Z")\
**Posts on this page:** 2\
**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:** [5 June 2020 21:56 UTC](https://discourse.nodered.org/t/validate-an-editablelist/27864/1 "2020-06-05T21:56:37Z")

</div>

Hi folks,

There was already another discussion about something similar ( "[validation for editablelist](https://discourse.nodered.org/t/validation-for-editablelist/21055) ") by our friend @hotnipi, but since it is locked I will start a new discussion here.

@JGKK and I want to _ **validate the input in an editableList** _, and give feedback to the user about the incorrect input. For example we don't want _empty file names or duplicate file names_...

So I tried the last hour adding some validation code to the creation of our editableList:

```auto
var slotsList = $("#node-input-slots-container").css('...').editableList({
   addItem: function(container, i, slot) {
      ...
      // Column 2 : Add an input field (type string) to the new row, that represents the file name
      var fileNameField = $('<input/>',{class:"node-input-slot-fileName",type:"text",placeholder:"File name"}).css({"..."}).appendTo(row);
      fileNameField.prop('required',true); // Let html5 show a red border automatically around the input element
      fileNameField.val(slot.fileName);
      fileNameField.on("change keyup paste", function() {
         var fileName = this.value;
                        
         // Find all fileName input fields with the same file name value
         var fileNameFields = slotsList.find(".node-input-slot-fileName").filter(function() {
            return this.value === fileName;
         })
         
         // Show a red border around the fileName field, when the same file name value is used in multiple input fields               
         if (fileNameFields.length > 1) {
            $(this).css('border', '1px solid rgb(214, 97, 95)');
         }
         else {
            $(this).css('border', '');
         }
      });       
      ...
   }
});

```

P.S. I could remove the `fileNameField.prop('required',true);` and check for empty fields in my validation function also...

And this _ **seems to be working fine** _ (both check for empty and duplicate names):

![voice2json_editablelist_validate](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93bb30c2b89e28271fa15a99a75fbacbf151d626.gif)

However if we add other extra checks, it might not be clear anymore for our users why his input is not valid. So I wanted to _ **show an error message nearby/in the input element** _ with this extra statements:

```auto
if (fileNameFields.length > 1) {
   $(this).css('border', '1px solid rgb(214, 97, 95)');
   fileNameField.setCustomValidity('File name must be unique!');
   fileNameField.reportValidity();
}
else {
   $(this).css('border', '');
   fileNameField.setCustomValidity('');
   fileNameField.reportValidity();
}

```

But the error message never appears 🥴  
Don't know if a 'submit' is required or what is wrong...

Does somebody have a tip how I can show such an error message?

Thanks!!  
Bart

---

<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:** [4 August 2020 21:56 UTC](https://discourse.nodered.org/t/validate-an-editablelist/27864/2 "2020-08-04T21:56:42Z")

</div>

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