Input Masking

sjb1963
Topic Author
Offline

3 years 1 month ago #7320 by sjb1963

Input Masking was created by sjb1963

First, I do not read German.
I've tried searching the forums and documentation and have been unsuccessful at finding an answer.

I would like to know where in a basic text field I can enter the input mask

For instance - I want a phone number formatted as (999) 999-9999

Thanks for your help.

Administrator AV
Offline

3 years 1 month ago #7321 by Administrator AV

Replied by Administrator AV on topic Input Masking

Hi,
whether a user input matches an input mask or not is controlled with the field validation.
( www.vi-solutions.de/en/documentations/vi...validate-user-inputs )
There are several standard validations (like minimum or maximum number of characters, required field,...), for which you find the options in the field configuration (on the right side).
If you want to validate a user input for a specific input mask, you use the "Custom validation", where you define a regular expression, that matches your requirements and a custom error message (like: Please enter your phone number as (999) 999 - 999)
Further on, you can use the "Placeholder" option in the field configuration to show the user your requested input mask format.
The validation is done, when the user clicks the submit button.
If the input is not valid, the error message is displayed.
Validating an input while the user is typing is not possible
Regards,
Aicha

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

sjb1963
Topic Author
Offline

3 years 4 weeks ago - 3 years 4 weeks ago #7322 by sjb1963

Replied by sjb1963 on topic Input Masking

I am asking for "Input Masking"
I am not asking for field validation, or to force the visitor to get it wrong before I tell them how it should be.

Or fill up space with field titles and fancy bubbles that popup when you click on them. None of that stuff is useful to me and absolutely impeded user experience.

Nor am I looking for "Placeholder" text which disappears when you start to fill the field.

I can provide multiple examples of this functionality if necessary; though it seems to be a fairly common.

baymard.com/blog/input-masking-form-field
uxdesign.cc/on-input-masking-31bc41eca2a2
coreui.io/docs/2.1/components/masked-input/
css-tricks.com/input-masking/

Last edit: 3 years 4 weeks ago by sjb1963.

Administrator AV
Offline

3 years 4 weeks ago #7323 by Administrator AV

Replied by Administrator AV on topic Input Masking

Hi,
thanks a lot for the clarification and your straight forward opinion on user experience!
This is really worth thinking about.

I will take a look into the examples.
Maybe this could be a really nice new feature for Visforms, but it might be a bit of an effort to make it compatible with all the other features, which Visforms already has.
Regards,
Aicha

sjb1963
Topic Author
Offline

3 years 4 weeks ago #7324 by sjb1963

Replied by sjb1963 on topic Input Masking

Hi there.
Thank you for considering this. It truly does make a huge difference and there is growing interest in terms of accessibility as well.

Here is another resource: robinherbots.github.io/Inputmask/

This looks like just about the simplest implementation, but unfortunately, I'm not a "real" programmer

Thanks very much for your help!

sjb1963
Topic Author
Offline

3 years 3 weeks ago - 3 years 2 weeks ago #7351 by sjb1963

Replied by sjb1963 on topic Input Masking

I have been able to get this to work:

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>

Then in my custom.js file, I have this:

Code:

jQuery(function ($){
    $("input[class*='maskzip']").inputmask("99999[-9999]");
    $("input[class*='maskdate']").inputmask("99/99/9999");    
    $("input[class*='masktime']").inputmask("99:99");    
    $("input[class*='maskdatetime']").inputmask("99/99/9999 99:99");    
    $("input[class*='maskphone']").inputmask({"mask": "(999) 999-9999"});
    $("input[class*='maskssn']").inputmask({"mask": "999-99-9999"});
    $("input[class*='maskein']").inputmask({"mask": "99-9999999"});
    $("input[class*='maskemail']").inputmask({"mask": "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]\@*{1,20}[.*{2,6}][.*{1,2}]"});
});

Now, in the "CSS Class For Field" box, add the classname (such as maskemail) to mask an email address.

For the email address to work, I had to change the input type to text, and then I used custom validation:

Code:

^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$

This is based on information here:
github.com/RobinHerbots/Inputmask?utm_so...mpaign=cdnjs_library

Your mileage may vary.
I'm muddling through this like everyone else

Last edit: 3 years 2 weeks ago by sjb1963.

Moderators: Administrator AV, Administrator IV

Joomla 5 Notice

Forum

Input Masking

Visforms Subscription

Visforms Extensions