Joomla 4.x Tutorial - Extension Development - Client Side Validation

Modify this post

Our goal in this part: when we enter a number in the name field, an error message is displayed immediately after we leave the field. In server-side validation, the message was not issued until after the form was sent to the server via the Save button.

In client-side validation, we provide a better user experience by responding quickly at the browser level. Here, all inputs in the user's browser are validated immediately. Client-side validation does not require a query to the server, thus reducing the load on the server and the network. This type of validation works on the browser side using scripting languages such as JavaScript or with HTML5 attributes.

For example, if the user enters an invalid email format, we issue an error message immediately after the user moves to the next field. This allows a correction to be made in a timely manner.

Most of the time, client-side validation depends on JavaScript being enabled in the browser. If JavaScript is disabled, user input is sent to the server unchecked. It is possible that this is malicious data! Therefore, client-side validation does not safely protect your component's users from malicious attacks.

Since both validation methods (server and client) have their own importance, it is recommended to use them side by side. Server-side validation is more secure - client-side validation is more user-friendly!

This part covers the client-side validation in Joomla 4.

For the impatient

Look at the changed program code in the Diff and apply these changes to your development version.

Step by step

In the following overview, the newly added files are marked with a background and the changed ones are outlined.

Overview of the files edited in this chapter

New files

Client-side validation is done via a class using a JavaScript file.


Again, it is about the principle, just like in the previous chapter. The quality of the validation is secondary and I choose a simple example. Numbers are forbidden in the text field for the name. Astrid is allowed. Astrid9 is not allowed.

In the example I use a regular expression. regex.test(value) returns true if regex = /^([a-z]+)$/i and value does not contain a number. For more information on the test method, see



document.addEventListener('DOMContentLoaded', function () {
  'use strict'
  setTimeout(function () {
    if (document.formvalidator) {
      document.formvalidator.setHandler('letter', function (value) {
        var returnedValue = false

        var regex = /^([a-z]+)$/i

        if (regex.test(value)) returnedValue = true

        return returnedValue
  }, 1000)

Modified files

administrator/components/com_foos/ foos.xml

In the installation manifest we add <filename>joomla.asset.json</filename> so that Joomla knows that the file joomla.asset.json belongs to the extension and is copied to the media/com_foos directory.

administrator/components/com_foos/ foos.xml

     <media folder="media/com_foos" destination="com_foos">
 	<!-- Back-end files -->

administrator/components/com_foos/ tmpl/foo/edit.php

The ->useScript('com_foos.admin-foos-letter'); entry adds the JavaScript file responsible for checking to the Webasset Manager.

administrator/components/com_foos/ tmpl/foo/edit.php

 $wa = $this->document->getWebAssetManager();

 $layout  = 'edit';
 $tmpl = $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=component' : '';

administrator/components/com_foos/ forms/foo.xml

We add class="validate-letter", so Joomla knows which CSS class should be checked.

administrator/components/com_foos/ forms/foo.xml



Last but not least, we register the new file under the name com_foos.admin-foos-letter in the webasset manager.


"description": "Joomla CMS",
   "license": "GPL-2.0-or-later",
   "assets": [
     "name": "com_foos.admin-foos-letter",
     "type": "script",
     "uri": "com_foos/admin-foos-letter.js",
     "dependencies": [
     "attributes": {
       "defer": true
       "name": "com_foos.admin-foos-modal",
       "type": "script",

Test your Joomla component

  1. install your component in Joomla version 4 to test it:

Copy the files in the administrator folder into the administrator folder of your Joomla 4 installation. Copy the files in the media folder into the media folder of your Joomla 4 installation.

A new installation is not necessary. Continue using the files from the previous part. 2.

  1. Open the view of your component in the administration area and create a new item or edit an existing one. Enter a number in the text field for the title. 3.
  2. Then edit another field, for example set the access to Registered.
  3. Make sure that at this point a warning is displayed.

Joomla Validation

Modify this post