Creating a form with asynchronous validation on the server in Joomla 1.5

In this article I will show one of the ways to create forms in Joomla 1.5 with asynchronous validation on the server. To do this, we will create a component that was built in accordance with the MVC concept implemented in Joomla 1.5, and the mootools 1.2 will be used as the JS framework.

Introduction

In this article I will not delve into the theory of the concept of MVC and its implementation in Joomla 1.5. I also assume that the reader is familiar with the general principle of creating components for this CMS, but if not, then you can see, for example, this . Perhaps, someday I will write an article about it, but now I would like to cover the subject :)
')

Formulation of the problem

It is required to create a frontend component that would implement asynchronous validation of the data entered in the form on the server. To make an asynchronous call to the server, we will use mootools 1.2.x In Joomla 1.5, mootools 1.1 is already built in, however, simply replacing files with code will not work - Joomla will not work well. But as always, I want to use modern solutions, so we will not use the moomools available in Joomla, but we’ll connect our latest version. Of course, there is a risk of conflict situations, but we will assume that at the front end we will not have components that use built-in mootools :) In addition, this method will be useful to those who want to use some other JS framework.

Implementation

The scheme of our component will be as follows. When you click on the submit button, the data from the fields will be sent asynchronously to the server, where they will be “received” by the Controller, validate the data and return a response in JSON format, which will contain information about the validity of the entered data. This information will be used on the client to display the results of the check using CSS.

Before going directly to the code, you need to make some explanations. According to the MVC concept, all user requests to the component must be serviced by the Controller (Controller). Having received the command, the controller “decides” how to react to this command. In the classical scheme, the Controller gives the Model command to receive / save / update data, and the result of this command is displayed by the View, which “knows” how to display the data.

There will be no Model in our simplest component, so the corresponding class will be empty; it is present in this example only to demonstrate the overall organization of the component code. The task of the view is to include the necessary styles and scripts, and display the form. In the Controller, the functionality of form validation on the server will be implemented as a separate task (task), which we will call asynchronously.

In the folder of the frontend parts of our component (which we will call AsyncForm ), i.e. in the / components / com_asyncform folder , we will have the following folder and file structure:

 + com_asyncform
    + assets
       + css
          -common.css
       + js
          -common.js
          -mootools-1.2.1-core.js
    + controllers
       -default.php
    + models
       -asyncform.php
    + views
       + tmpl
          -default.php
       -view.html.php
    -asyncform.php

  asyncform.php 

1. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
2. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
3. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
4. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
5. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
6. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
7. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
8. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
9. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
10. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
11. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
12. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
13. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
14. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
15. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
16. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
17. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
18. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
19. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
20. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>
21. <?php
defined ( '_JEXEC' ) or die ( 'Restricted access' ) ;

if ( $controller = JRequest :: getVar ( 'controller' ) ) {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . $controller . '.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . $controller . DS . 'view.html.php' ) ;
}
else {
require_once ( JPATH_COMPONENT . DS . 'controllers' . DS . 'default.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'models' . DS . 'asyncform.php' ) ;
require_once ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'view.html.php' ) ;
}

// Create the controller
$classname = 'AsyncformController' . $controller ;

$controller = new $classname ;
$controller -> execute ( JRequest :: getVar ( 'task' ) ) ;
$controller -> redirect ( ) ;
?>

  controllers / default.php 

1. <? php
   
2. jimport ( 'joomla.application.component.controller' ) ;
   
3. 
   
4. class AsyncformController extends JController {
   
5. function __construct ( $ default = array ( ) ) {
   
6. parent :: __construct ( $ default ) ;
   
7. $ this -> registerDefaultTask ( 'display' ) ;
   
8. $ this -> registerTask ( 'check' , 'check' ) ;
   
9. }
   
10. 
    
11. function cancel ( ) {
    
12. $ this -> setRedirect ( 'index.php' ) ;
    
13. }
    
14. 
    
15. function display ( ) {
    
16. $ view = new AsyncformView ( ) ;
    
17. $ view -> display ( ) ;
    
18. }
    
19. 
    
20. function check ( ) {
    
21. $ isValid = false ;
    
22. $ res [ 'type' ] = '' ;
    
23. $ res [ 'msg' ] = '' ;
    
24. $ res [ 'items' ] = array ( ) ;
    
25. 
    
26. $ name = substr ( JRequest :: getVar ( 'name' ) , 0 , 50 ) ;
    
27. if ( ereg ( '[aaja-Yaa-zA-Z \ -] + $' , $ name ) ) {
    
28. $ res [ 'items' ] [ ] = array ( 'name' => 'name' , 'status' => 1 ) ;
    
29. $ isValid = true ;
    
30. }
    
31. else {
    
32. $ res [ 'items' ] [ ] = array ( 'name' => 'name' , 'status' => 0 ) ;
    
33. $ isValid = false ;
    
34. }
    
35. 
    
36. $ email = strtolower ( substr ( JRequest :: getVar ( 'email' ) , 0 , 50 ) ) ;
    
37. if ( ereg ( '^ [^ 0-9] [a-z0-9 _ \ - \.] + @ [^ 0-9] [az \ - \.] + \. [az] {2,4} $ ' , $ email ) ) {
    
38. $ res [ 'items' ] [ ] = array ( 'name' => 'email' , 'status' => 1 ) ;
    
39. $ isValid = true ;
    
40. }
    
41. else {
    
42. $ res [ 'items' ] [ ] = array ( 'name' => 'email' , 'status' => 0 ) ;
    
43. $ isValid = false ;
    
44. }
    
45. if ( $ isValid ) {
    
46. $ res [ 'type' ] = 'valid' ;
    
47. $ res [ 'msg' ] = 'The form is filled in correctly' ;
    
48. }
    
49. else {
    
50. $ res [ 'type' ] = 'error' ;
    
51. $ res [ 'msg' ] = 'Error!' ;
    
52. }
    
53. 
    
54. echo json_encode ( $ res ) ;
    
55. }
    
56. }
    
57. ?>

The check () method generates a response in JSON format, which consists of:

• text field type - the result of the test (valid or error)
• msg text field - message for user
• an array of items, whose elements are arrays of two elements, in which the id fields of the form and their status are stored, we will need this information to display in which fields the error

  models / asyncform.php 

1. <? php
   
2. jimport ( 'joomla.application.component.model' ) ;
   
3. 
   
4. class AsyncformModel extends JModel {
   
5. }
   
6. ?>

  views / default / view.html.php 

1. <? php
   
2. jimport ( 'joomla.application.component.view' ) ;
   
3. 
   
4. class AsyncformView extends JView {
   
5. public $ message ;
   
6. 
   
7. function __construct ( ) {
   
8. $ this -> addTemplatePath ( JPATH_COMPONENT . DS . 'views' . DS . 'default' . DS . 'tmpl' ) ;
   
9. }
   
10. 
    
11. function display ( $ tpl = null ) {
    
12. // JHTML :: _ ('behavior.mootools');
    
13. 
    
14. $ document = & JFactory :: getDocument ( ) ;
    
15. $ document -> addStyleSheet ( 'components / com_asyncform / assets / css / common.css' ) ;
    
16. $ document -> addScript ( 'components / com_asyncform / assets / js / mootools-1.2.1-core.js' ) ;
    
17. $ document -> addScript ( 'components / com_asyncform / assets / js / common.js' ) ;
    
18. 
    
19. parent :: display ( $ tpl ) ;
    
20. }
    
21. }
    
22. ?>

If you still want to use the built-in mootools, then use the operator in line 12 instead of line 16.

  views / default / tmpl / default.php 

1. <? php defined ( '_JEXEC' ) or die ( 'Access denied' ) ; ?>
   
2. 
   
3. <div id = "log"> </ div>
   
4. 
   
5. <form id = "frm_asyncform" action = "index.php? option = com_asyncform & task = check & format = raw" method = "post">
   
6. <table>
   
7. <tr>
   
8. <td> Name </ td>
   
9. <td> <input type = "text" name = "name" id = "name" /> </ td>
   
10. </ tr>
    
11. <tr>
    
12. <td> Email </ td>
    
13. <td> <input type = "text" name = "email" id = "email" /> </ td>
    
14. </ tr>
    
15. </ table>
    
16. <input type = "submit" name = "btn_submit" id = "btn_submit" value = "send" />
    
17. </ form>

Pay attention to the form handler. This type of handler is due to the fact that we only need to get a response string from the server, without any additional html markup, etc. In Joomla 1.0.x, in order to return only the component output, you had to use index2.php, but in Joomla 1.5 this will not work. For these purposes, it has a format parameter, which in order to return only the output of the component, must be equal to raw.

  assets / css / common.css 

1. .error {
   
2. border : 2px solid # ff0000 ;
   
3. }
   
4. 
   
5. #log {
   
6. padding : 5px ;
   
7. overflow : auto ;
   
8. margin-bottom : 5px ;
   
9. width : 452px ;
   
10. }
    
11. 
    
12. #log .loaded {
    
13. background-color : # ffc0c0 ;
    
14. }
    
15. 
    
16. #log .loaded-success {
    
17. background-color : # c0ffc0 ;
    
18. }

  assets / js / common.js 

1. window. addEvent ( 'domready' , function ( ) {
   
2. $ ( 'frm_asyncform' ) . addEvent ( 'submit' , function ( e ) {
   
3. e. stop ( ) ;
   
4. var log = $ ( 'log' ) . empty ( ) ;
   
5. this . set ( 'send' , {
   
6. method : 'post' ,
   
7. onComplete : function ( response ) {
   
8. var res = JSON. decode ( response ) ;
   
9. res. items . each ( function ( field ) {
   
10. if ( field. status )
    
11. $ ( field. name ) . removeClass ( 'error' ) ;
    
12. else
    
13. $ ( field. name ) . addClass ( 'error' ) ;
    
14. } ) ;
    
15. if ( res. type == 'valid' )
    
16. log. addClass ( 'loaded-success' ) ;
    
17. else
    
18. log. addClass ( 'loaded' ) ;
    
19. log. set ( 'html' , res. msg ) ;
    
20. }
    
21. } ) ;
    
22. this . send ( ) ;
    
23. } ) ;
    
24. } ) ;

Here, the response received from the server as a string is converted to a js-object, after which its contents are analyzed and the necessary parameters are set to the html elements in the body of the component.

That's all. I hope this post will be useful to someone. Comments, tips and suggestions are naturally welcome!