Validate an editableList

Developing Nodes
1

Hi folks,

There was already another discussion about something similar ( "validation for editablelist ") 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:

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

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:

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 :woozy_face:
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

2

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