Is there a way to show the characters remaining limit on the interface

  • 2
  • Problem
  • Updated 3 years ago
  • In Progress
Hi, is there a way to show the characters remaining for a character limit on the interface . Suppose if a field has a 250 character limit, to show the user filling it out how many characters are left (before submitted the page and getting an error).
Photo of paras jain

paras jain

  • 264 Points 250 badge 2x thumb

Posted 3 years ago

  • 2
Photo of paras jain

paras jain

  • 264 Points 250 badge 2x thumb
I am trying to write Inline snippet code...that works on  onclick of table cell...
but field is not editable...field has lost its editable functionality... pls reply
Photo of paras jain

paras jain

  • 264 Points 250 badge 2x thumb
Finally i got sucess ..
Inline snippet code is :-

var field = arguments[0],       value = skuid.utils.decodeHTML(arguments[1]),
    $ = skuid.$;
  //  alert('adsadacaca');
    
// Run the default renderer    
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (field.mode === 'edit') {
    
    var errorMessageBox;
    var addFieldError = function(errorMessage) {
        if (!errorMessageBox) {
           errorMessageBox = field.element.find('.field-error-messages');
           if(!errorMessageBox.length) {
               errorMessageBox = $('<div class="field-error-messages">');
               field.element.append(errorMessageBox);
           }
       }
       errorMessageBox.show();
       field.element.addClass('my-required-field');
       errorMessageBox.text(errorMessage);
     // alert('adsadacaca');
    };
    
    var input = field.element.find(':input');
    
    var MAX_VALUE = 10;
    var inputValueIsBad = function(inputValue) {
        var str = inputValue;
            var n = str.length;
      //  alert(n);
        return parseInt(n);
      //  alert('adsadacaca');
    }
    
    skuid.utils.delayInputCallback(input,function(newValue,oldValue){
        var val = input.val();
       if (inputValueIsBad(input.val())) {
           var inptText =input.val() ;
           var lengthText = inptText.length;
          // alert(lengthText);
           // Add an error
           if(lengthText<=255){
            var remainingCharacter = 255 - lengthText ;
            addFieldError('Remaining Characters are '+remainingCharacter);
           }
           if(lengthText>255)
           addFieldError('Hey! Dude You can not Enter more then '+'255'+' characters');
         //  addFieldError('Hey! Dude You can not Enter more then 255 characters');
           // And revert the value
        /*   if (inputValueIsBad(oldValue)) oldValue = 999999999;
           field.model.updateRow(field.row,field.id,oldValue);
           input.val(oldValue); */
       }  else {
           if (errorMessageBox) errorMessageBox.hide();
           field.element.removeClass('my-required-field');
       }
    });
}

>>>>>>>>>>>>>>>>
and CSS Used is 

.field-error-messages {       color: red;
    padding: 2px;
}
.my-required-field textarea, .my-required-field input  {
    border: 1px solid #D00;
    border-right: 4px solid #D00;
}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Well done. 
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
I'm curious if Skuid has considered adding this feature as an option. Would be really helpful where form filling is primary use.

Is there a generalized way to make this apply to all text or large text fields? ie a way that the JS could figure out the character limit for the field and then apply that (and do it across many fields)
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
Hmm...it seems this is not working code as per the post about the undocumented skuid method used here, so I think the thread should not be marked as "solved".

I can't find anything else on the community about showing character limits on fields or  giving the user a reasonable sense of what can be entered in a field when skuid is used as a form for data collection (and feedback if they don't do it within the limits). Suggestions?