Discussion :

[GATEN]

Bonjour,

Je suis surpris que Zend_Form ne puisse pas générer des validateurs javascript de façon automatique.

Par exemple, je déclare ->setRequired(true) sur un champ input text et lors de la soumission du formulaire une fonction javascript vient s'assurer que le champ n'est pas absent/vide et affiche une alerte en conséquence.

Je suis obligé de réécrire tout ça. C'est assez lourd je trouve.

Merci si vous avez des astuces.

[5h4rk]

Chaque framework a un fonctionnement particulier, et il n'est pas dur d'intégrer les validations en javascript.
Mais cela demande toutefois un minimum de développement.

[GATEN]

Je propose ma solution :

- Ajouter une Action à votre controller (à renommer avec le nom de votre form):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    public function getvalidationmessagesformtest()
    {
		$this->_helper->layout->disableLayout();
		$this->_helper->viewRenderer->setNoRender();
		$this->getResponse()->setHeader('Content-Type', 'application/json');
 
		if($this->_request->isPost())
		{
			$form = $this->getFormTest();
			echo $form->getJsonResponseForValidation($this->_request->getPost());
      }
    }

- Utiliser la classe My_Form (à renommer comme vous le voulez) ci-dessous. Vous pourrez aller appeler la fonction ->setAjaxValidation(url) comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$formTest = new My_Form;
$formTest->setAjaxValidation(url)

L'url à passer est l'url de l'action. On peut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$formTest->setAjaxValidation($this->view->url(array('controller'=> "Home", 'action'=> "getvalidationmessagesformtest"))

Voici ensuite le fichier javascript et la class My_Form (vous devez adapter le chemin du fichier javascript dans la class php My_Form)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
function My_Form(){};
/* Private function */
My_Form.doAjaxValidation = function(form, url, params)
{
	if($(form).size() == 0 || $(form).get(0).tagName.toString().toUpperCase() != "FORM")
		throw('Error param. form Dom element required.');
 
	$.ajax(
	{
		async: true,
		type: "post",
		dataType: "json",
		url: url,
		data: params,
		success: function(results)
		{
			if(typeof(results) != 'object')
				throw('Error : success ajax request but wrong type of results variable ('+typeof(results)+').');
			else
			{
				if(typeof(results['isValid']) == 'undefined')
					throw('Error : success ajax but value isValid is missing.');
				else
				{
					if(results['isValid'] != 0 && results['isValid'] != 1)
						throw('Error : success ajax but value of isValid invalid.');
					else
					{
						if(results['isValid'] == 1)
						{
							$(My_Form.getFlag(form)).val(1);
							alert('submit now (val = '+(My_Form.getFlag(form)).val()+')');
							$(form).submit();
						}
						else
						{
							$(My_Form.getFlag(form)).val(0);
 
							$(form).find('ul.errors').remove();
							var ulError;
							var lastKey;
							for(var keyName in results['messages'])
							{
								ulError = '<ul id="errors-'+keyName+'" class="errors" style="list-style-type: none;">';
								for(var keyError in results['messages'][keyName])
								{
									ulError += '<li>'+results['messages'][keyName][keyError]+'</li>';
								}
								ulError += '</ul>';
 
								$(form).find('input[name='+keyName+']').parent().append(ulError);
							}
						}
					}
				}
			}
		},
		error: function()
		{
			$(My_Form.getFlag(form)).val(0);
		},
	});
 
	$(My_Form.getFlag(form)).val(0);		
};
 
My_Form.getFlag = function(form)
{
	if($(form).size() == 0 || $(form).get(0).tagName != "FORM")
		throw('Error param. form Dom element required.');
 
	var flag = $(form).find('input[type=hidden][name=statusAjaxValidation]');
 
	if($(flag).size() == 0)
		$(form).append('<input type="hidden" name="statusAjaxValidation" value="0"/>');
 
	return $(form).find('input[type=hidden][name=statusAjaxValidation]');
};
 
My_Form.getParams = function(form)
{
	if($(form).size() == 0 || $(form).get(0).tagName != "FORM")
		throw('Error param. form Dom element required.');
 
	var params = {};
	$(form).find('input').each(function()
	{
		params[$(this).attr('name')] = $(this).val();
	});
 
	return params;
};
 
/* Private variable */
My_Form.lastParams = {};
 
/* Public function */
My_Form.valid = function(form, url)
{
	var doAjax = false;
	var params = My_Form.getParams(form);
	for(var i in params)
	{
		/* Debug *//*
		if(typeof(My_Form.lastParams[i]) == 'undefined')
			console.log(i+' undefined');
		else if(My_Form.lastParams[i] !== params[i])
			console.log(i+' is different');*/
		if(typeof(My_Form.lastParams[i]) == 'undefined' || My_Form.lastParams[i] !== params[i])
		{
			doAjax=true;
			break;
		}
	}
 
	if(doAjax)
	{
		My_Form.lastParams = params;
		My_Form.doAjaxValidation(form, url, params);
		return false;
	}
	else	
		return $(My_Form.getFlag(form)).val() == 1;
};

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<?php
class My_Form extends Zend_Form
{
	private $ajaxValidation=false;
	private $url;
 
	public function getJsonResponseForValidation(Array $post)
	{
		$params = Array();
 
		if($this->isValid($post))
			$params['isValid'] = 1;
		else
		{
			$params['isValid'] = 0;
			$params['messages'] = $this->getMessages();
		}
 
		return json_encode($params);
	}
 
	public function setAjaxValidation($url)
	{
		$this->ajaxValidation=true;
		$this->url = $url;
 
		Zend_Layout::getMvcInstance()->getView()->headScript()->appendFile(My_Gm::addFiletimeToUrl('/js/My_Form.js'));
 
		return $this;
	}
 
	public function __toString()
	{
		if($this->ajaxValidation)
		{
			$oldSubmit = $this->getAttrib('onsubmit');
 
			$this->setAttrib('onsubmit', '
			if(My_Form.valid($(this), "'.$this->url.'") === false)
				return false;
			else
				'.$oldSubmit);
		}
		return parent::__toString();
	}
}

Et voilà, votre formulaire est vérifié en ajax avant soumission et avec un minimum de ligne de code pour vous (8 lignes de plus dans votre controller !).

PS : Si votre formulaire dispose d'un évènement onsubmit, le contenu de cet évènement sera exécuté si le formulaire est valid.
Attention : Ça ne dispense pas de retester si le formulaire est valide coté php après la soumission.

Remarque : C'est particulièrement pratique pour les formulaires full ajax