0

I am looking for an example, or a tutorial to create a customized text field for Joomla with a formatted string like xxx-xxx-xxx-xxx and a control during the input. I can use JQuery for that. Where can i find an exapmle, a tutorial, some explanations ... for doing that. I must use Joomla 3.9 Thanks

7
  • 1
    Have you already got a jform? An XML file? A custom field showing html already? Apr 16, 2023 at 1:46
  • I have started from the start because I have no track to know how to do it. I have a text custom field on my Joomla (with data inside) but (and it is the problem) all the data are not well formated. I don't have lots of data (about 200) and I can re-write them in a new CF field. But I'd like to have a good CF.
    – Seb
    Apr 16, 2023 at 6:24
  • So I don't have any JForm
    – Seb
    Apr 16, 2023 at 6:24
  • Can you provide more clarity around the required string format? Some realistic samples? Are those x's numbers? letters? any character? Apr 16, 2023 at 23:58
  • Also, any description or code of what you do have so far would be helpful. Joomla implements form fields in half a dozen ways. Apr 17, 2023 at 2:42

1 Answer 1

1

I like the questions here on JSE which you can go into trouble with. In Joomla we can create a Form Field with XML but that is really just creating an HTML input field with the help of XML, nothing more. However what you are looking for, as far as I see it from your question, is that you want also a server side sanitization and validation on the submitted input data. So the question can get longer than just creating a formatted html Text input field in Joomla.

Creating a Text field example:

<?xml version="1.0" encoding="UTF-8"?>
<form name="texttest" 
    addfieldprefix="Joomla\Component\Hiscomponent\Administrator\Field">
    <fieldset name="special">
        <fields name="mytext">
            <field
                name="formattedtext"
                type="text"
                class="phone"
                label="FORMATTED TEXT FIELD"
                description="TEST OF THE FORMATTED TEXT FIELD"
                required="true"
                hint="required format: 7548-45-879-1458"
                inputtype="tel"
                message="Please use this format: 7584-78-758-7541"
                pattern="^(\d{4})-(\d{2})-(\d{3})-(\d{4})$"
            />
        </fields>
    </fieldset>
</form>

As we can see, this is a simple HTML text field with inputtype="tel" (not important to adding this) and it has an extra pattern attribute that checks the input value against a regex pattern. This pattern is helpful in most cases. (the pattern could be simplified more: ^\d{4}-\d{2}-\d{3}-\d{4}$ )

You put the above XML file in your component/forms subfolder. I gave the name for this Form and file 'texttest.xml'.

You can include and display this form/text field in your layout with the following code as an example:

<?php

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');

use Joomla\CMS\Factory;
use Joomla\Database\DatabaseInterface;

use Joomla\CMS\Form\Form;

// testing a Form field:
Form::addFormPath(JPATH_ADMINISTRATOR . '/components/com_hiscomponent/forms');

$newForm = Form::getInstance('texttest', $data = 'texttest', $options = [], $replace = false, $xpath = false);

?>

<div class="custom-form-section">
    <form action="">        
        <?php echo $newForm->renderFieldset('special'); ?>
        <button class="button" type="submit" value="submit">Submit</button>
    </form>
</div>

Now, what is the problem with this? The problem with this is that we just created a simple HTML text input field so far, nothing else. And it works and it checks the input on client side whether it has the correct input format: 'xxxx-xx-xxx-xxxx' or not and if not, it even pops up an html alert.

This is the HTML we created so far:

<div class="custom-form-section">
    <form action="">
        <div class="control-group">
            <div class="control-label"><label id="mytext_formattedtext-lbl" for="mytext_formattedtext" class="required">
                    FORMATTED TEXT FIELD<span class="star" aria-hidden="true">&nbsp;*</span></label>
            </div>
            <div class="controls">
                <input type="text" name="mytext[formattedtext]" id="mytext_formattedtext" value=""
                    class="form-control phone required" aria-describedby="mytext_formattedtext-desc"
                    placeholder="7548-45-879-1458" required="" pattern="^(\d{4})-(\d{2})-(\d{3})-(\d{4})$">

                <div id="mytext_formattedtext-desc" class="">
                    <small class="form-text">
                        TEST OF THE FORMATTED TEXT FIELD
                    </small>
                </div>
            </div>
        </div>
        <button class="button" type="submit" value="">Submit</button>
    </form>
</div>

And actually as an input field it is still quite useless since it does not show the input value in the requested format when you are typing, it only displays the value as a simple text. It does not help the User at all even it can annoy the website's visitors most of the times if we would leave it this way.

For formatting this text input field we definitely need to add a short Javascript script (at the bottom of our layout for example).

<script>

window.addEventListener('load', () => {
    if (document.getElementById("mytext_formattedtext")) {
        const el = document.getElementById("mytext_formattedtext");
        
        el.oninput = () => {
            el.value = phFormat(el.value);
        }
    }
});

// returns ####-##-###-####
function phFormat(input) { 
    if(input.length) {
               
        input = input.replace(/\D/g,'');
        let size = input.length;
        if (size > 0) {input = input.slice(0,15)}
        if (size > 3 && size !== 4) {input = input.slice(0, 4)+"-" + input.slice(4, 15)}
        if (size > 6) {input = input.slice(0, 7)+"-" + input.slice(7, 15)}
        if (size > 10) {input = input.slice(0, 11)+"-" + input.slice(11, 15)}
        
        return input;

    } else {
        input = '';
        return input;
    }
}

</script>

This script can be really useful at User side to display the formatted input field and as someone types the numbers can see how it is formatted. I saw this short script and customized it a bit for this purpose. But this is still just the client side of the whole task. This script does not let you input letters or special characters in the field and if you input less numbers it will alert you that you need to provide the input in the requested format. Nice and short.

You can check how this works here on jsfiddle: https://jsfiddle.net/Lw6acs38/1/

Now, finally, this will be submitted in Joomla to your Joomla Controller's method (which you will create in your component) where you can validate and sanitize the submitted data against the very similar regex what I used in the pattern of the XML field (few lines only) and if the data value is OK then you will forward it to your Model's method and you can save it in your component Model in the database.

3
  • 1
    Great. Thanks a lot for your answr very complete. I will be able to resume my development on the subject. Many thanks
    – Seb
    Apr 23, 2023 at 4:09
  • 1
    Is there a benefit to the parentheses in your regex @Zollie? They will work the same without, right? Apr 24, 2023 at 14:11
  • @mickmackusa - Yes, indeed, you are absolutely right, it works without the parentheses. I used them for my visual preferences only. :)
    – Zollie
    Apr 24, 2023 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.