Field Formatting or Masking Input fields

[icoso]

Regarding field formatting or "Masks" for a field like a phone number which should have the format when displayed of (###) ###-#### or another simple typical telephone mask in the US is ###-###-####
or for a SSN field the mask should be ###-##_####
or for a US zip code the mask should be #####-#### where the "-####" part is optional, but only if the user started typing a 6th number ie: 12345-6789 would the optional mask apply.
or for a new standard on US dates formats the current standard is MM-DD-YYYY not MM-DD-YY.

I read the old manual that kind of discusses this on pages 47 & 48. I changed my input type to a nuNumber instead of a number and on the format pull down on the input tab the only options are: $1,000.00 or 1000.00 Nothing like 1000 as shown in the manual. Can these options be modified somewhere??? Is there anywhere in this system to add a "Mask" to a field for formatting like can be done in Access? Ie: https://support.microsoft.com/en-us/off ... 47832de8da

So I assume that I should create these field types as nuB "numbers" when creating the Fast Form, because I only want numbers to be able to be entered for these fields. is this correct?

How do I apply the formatting to these fields on their forms when the user starts typing the data in those fields they do not have to type the formatting. It should get automatically applied. I want them to be saved in the table without the formatting. I know how to do this with JavaScript and onchange() events but it would seem this formatting could be accomplished by the DB system itself with implementing Masks for certain field types, like numbers.

How do I get rid of the little scroll bars on these number fields on the forms?

How do I protect a field on a form from being changed (ie: an SSN) I dont' want the end -user to be able to change this field after it has originally been entered and saved for a customer.

[kev1n]

Is there anywhere in this system to add a "Mask" to a field for formatting like can be done in Access?

No, there's isn't. You would have to do that with JS/CSS. There might be JS libraries that can do that.

[icoso]

No, there's isn't. You would have to do that with JS/CSS. There might be JS libraries that can do that.

I have several JS functions already built in my own library of functions that I use for field validation and masks.

Do I have to load that entire library of JS functions into the properties of each field custom code? OR is there a higher hierarchy where I can load that Javascript Library then just make the field validation calls to the appropriate function for each field type? For example:

Im assuming that I would add my entire library of JS functions in the Form Properties Custom Code window, right?

Then add my Javascript code in the Field properties of my Field under the custom code that calls one of the functions I loaded in the Form Custom code. ie: (onBlur="if(this.value != ''){ if (!isSSN(this.value)){ this.focus(); ) }}

Am I correct on this?

[icoso]

Anyone,

I added this code to my form properties under the Custom code tab as a test

/* Function to validate data entry to be called in each field custom code*/

function checkfld(str,mask) {

alert(str);
return true;

}

Then added this code on a field to test it.

checkfld(this.value,"###-###-####");

I used the onkeydown event.

I saved it refreshed, logged out, logged back in, and inspected the DOM and see that when I type something in that field I see:

"Uncaught TypeError: mask is not a function"
checkfld https://mysite.com/nubuilder/index.php line 2 > injectedScript:17

What am I doing wrong?

[kev1n]

Hi,

I'm not able to replicate the issue:

Custom Code:

custom_code.png

Event handler added:

onkeydown.png

Is there any other JS code that might be causing this error?

[kev1n]

Im assuming that I would add my entire library of JS functions in the Form Properties Custom Code window, right

External Js libraries can be added under Setup -> Header:

<script src='your_js_file' type='text/javascript'></script>

[kev1n]

Then add my Javascript code in the Field properties of my Field under the custom code that calls one of the functions I loaded in the Form Custom code. ie: (onBlur="if(this.value != ''){ if (!isSSN(this.value)){ this.focus(); ) }}

You could also define an array of fields to be validated along with the corresponding rule and then loop through the array and add an onblur handler to the fields.

[icoso]

For anyone that wants it. Here is the Javascript code I used to create a Mask on a text field for numbers and characters only. Its not perfect but it works well enough for me. Field Names could use some work too.

Put this in your Custom Code Under the Form Properties

Code: Select all

function checkfld(evt, str, mask) {

  var mLn = mask.length;
  var orgstr = str.value;
  var sLn = orgstr.length;  
  var curstr = evt.key
  var validmasks = '#@';
  var charCode = (evt.which) ? evt.which : evt.keyCode

  if (charCode == 8 || charCode == 37 || charCode == 39 || charCode == 35 || charCode == 13|| charCode == 9) {return false;}  
  // if user presses left arrow 8 |backspace 37 |right arrow 39| end 35 | home 36 | del 46 | enter=13 |tab=9
  if (charCode == 46) {str.value = ""; return evt.preventDefault(); }  // if user presses del = delete ALL
  if (charCode == 32) {return evt.preventDefault(); }  // if user presses space
  /* alert(charCode); */

  if (sLn < mLn) {

  var i=0;
  var charmask = mask[sLn+i];

while (!validmasks.includes(charmask)) {   
   str.value = str.value + charmask; 
   if (i>4) {break;}
   i++;
   charmask = mask[sLn+i];
} /* while */   
   
   switch(charmask) {
     case "#":
        if ((curstr >=0) && (curstr <=9)) { return true; 
        } else { return evt.preventDefault(); }
        break;
       
     case "@":
        if ((curstr.toUpperCase() >= "A") && (curstr.toUpperCase() <= "Z")) { return true; 
        } else { return evt.preventDefault(); }
        break;
        
     default:
        return evt.preventDefault(); 
       break;
   } /*switch */     
 
  } else { return evt.preventDefault(); }   /* if sLn < mLn mask length */  
return true;
}

To call it from any field that you want to mask, put this in the Custom Code on the field properties ( to get there double click the field label). The third value is the mask you want to use:
ie: For Phone numbers: ###-###-#### or (###) ###-#### For SSNs: ###-##-#### For CC's: ####-####-####-#### For Expire dates: ##/#### The # is a number.
For Characters only A-Z or a-z use the "@". I haven't thought of a good mask to allow other punctuation. This mask allows you to use a varchar field for just about anything and preformat it how you want before saving it. Just found out that this works on date fields, number fields (if you have a certain number of numbers allowed like a 4 digit year field), I haven't tried or thought about money fields that you want to store as varchar. Probably needs some work for that. I'm sure there's lots of issues with the code. It comes with no warranty.... Something that could be added to it is after the user hits tab or enter it could be used for final validation too and maybe some optional field masking too IE: |#|#|#,|#|#|#,|#|#|#.00 where everything between the first an last | is optional. For this the mask would have to be applied backwards as the user types. Oh well, just a little more coding... Maybe Kev1n can play with it and clean it up...

Code: Select all

checkfld(event,this,'###-###-####');