Custom text format

[sloranger]

Hi, is this possible to put custom text format in text fields (phone number, postal code, etc)?

[Richsurvey]

Hi,

I'm also interested in finding a solution to this dilemma. I've found this post on the NuBuilder blog (http://nubuilder.blogspot.ca/2009/07/nu ... icity.html) pretty much informing me that this solution will not be implemented, but you can create a JavaScript to solve the problem (which is perfectly fine). I also found this jQuery plug (http://digitalbush.com/projects/masked-input-plugin/) - pretty nice, but I don't know how to implement the plug-in to NuBuilder.

any help will be greatly appreciated. either a complete solution (add an input mask to a textbox) or adding the above plug-in to NuBuilder. Or even pointing me in the right direction on how to write the script (not a programmer - but willing to learn).

Thanks in advance!
Rich

[admin]

Here are some samples that you can put on a Form's Javascript Custom Code and called onchange of the Object you are trying to format...

Code: Select all

function nuFormatPhone(t){

    if(t.value.length != 10){
        alert('Must have 10 numbers');
        t.value = '';
        return;
    }

    t.value = t.value.replace(/(\d{2})(\d{4})(\d{4})/, '$1 $2 $3');
    t.value = String(t.value).substr(0,12);

}

function nuFormatMobile(t){

    if(t.value.length != 10){
        alert('Must have 10 numbers');
        t.value = '';
        return;
    }

    t.value = t.value.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
    t.value = String(t.value).substr(0,12);


}

function nuFormatABN(t){

    if(t.value.length != 11){
        alert('Must have 11 numbers');
        t.value = '';
        return;
    }

    t.value = t.value.replace(/(\d{2})(\d{3})(\d{3})(\d{3})/, '$1 $2 $3 $4');
    //t.value = String(t.value).substr(0,11);

}

function nuFormatPC(t){

    if(t.value.length != 4){
        alert('Must have 4 numbers');
        t.value = '';
        return;
    }

    t.value = t.value.replace(/(\d{4})/, '$1');

}

Steven

[Richsurvey]

Hi Steven,

Thank you very much for the quick reply. That code works, but my desired mask is a bit different. I'm looking to have users enter 2 to 4 uppercase letters (ideally I want it to be upper case while they are entering) a space after the letter and the date in the following format: ##-##-## and with a letter in uppercase after the date (e.g PI 15-12-16A or PIN 15-09-13 or PINS 15-09-12J). In MS Access the input mask I created for this is: >LL??\ 00\-00\-00?;0;_

I've looked online and found a couple of solutions for an input mask plugin (e.g http://javascriptools.sourceforge.net/s ... _mask.html), but I'm still stuck as to how to implement them into NuBuilder. I've tried inputing the JavaScript plugin to the index.php and adding the code into the form's JavaScript custom code, but no dice. can you please let me know if this type of solution is possible.

Again, I'll take any help you can provide. Thanks!
Rich

[admin]

Rich,

Put the JavaScript on the Form that it will be called from..

c1.PNG

Put an event that calls the JavaScript on the Object you want to format..

c2.PNG

Steven

[Richsurvey]

Hi Steven,

Thanks for your help. this works! I'm sure most users in hear knows how to do this, but if not here is how i got the plug-in to work (I’m using the following plugin http://javascriptools.sourceforge.net/s ... _mask.html)

1. Save the plug-in/script in a folder in nuBuilder – I saved mine in “nubuilder\jquery”

2. open “index.php” in a text editor (I use Notepad++) and add the script location.

3. In the custom code -> JavaScript of the form create a function that uses the script/plug-in you added. Mine looks like the following:

Code: Select all

function setup() {
var custom1 = new InputMask([fieldBuilder.upperLetters(2, 4), fieldBuilder.literal(" "), fieldBuilder.inputNumbers(2), fieldBuilder.literal("-"), fieldBuilder.inputNumbers(2), fieldBuilder.literal("-"), fieldBuilder.inputNumbers(2), fieldBuilder.upperLetters(0, 1)], "study_");
}

4. In the events tab of the object you want to use this function/feature call the function based on an event. Mine is:
Onfocus : setup().

DONE! - Any easy way to test if the plug-in/script is working is in fast form - If when you click on “E” (View edit form) the edit screen opens then the script is working.

I'm not sure if jQuery plug-in works (I tried a few, but with little success). I’m slowly learning, but in the end I would like my forms to look like this: http://classicforms.workforfood.pro/ful ... rvice.html
- is this possible? the authors website is here: http://codecanyon.net/item/classic-form ... k/12938156


Again thanks for all your help Steven.

[admin]

Rich,

Instead of step 2, as you have done, you could add the script location in System Setup.

Capture.PNG

That way it won't interfere with future nuBuilderPro updates.

Steven