The verifier()
function of the form can return errors if the submitted field contents are not correct; which we will see in more detail later. To display these errors in the form’s HTML, there are CSS classes and a naming system which are employed:
At the top of the form there are general errors (or success messages):
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
For each field, there is a message and a CSS class on the list item to visually tag the error. The field message is calculated using the #ENV{erreurs}
variable which provides all the field errors:
#SET{erreurs,#ENV**{erreurs}|table_valeur{xxx}}
<li class="editer_xxx obligatoire[ (#GET{erreurs}|oui)erreur]">
[<span class='erreur_message'>(#GET{erreurs})</span>]
</li>
This combines with the previous form to give:
<div class="formulaire_spip formulaire_demo">
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
<form action="#ENV{action}" method="post"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<ul>
#SET{erreurs,#ENV**{erreurs}|table_valeur{la_demo}}
<li class="editer_la_demo obligatoire[ (#GET{erreurs}|oui)erreur]">
<label for="la_demo">La demo</label>
[<span class='erreur_message'>(#GET{erreurs})</span>]
<input type='text' name='la_demo' id='la_demo' value="#ENV{la_demo}" />
</li>
</ul>
<p class="boutons"><input type="submit" class="submit" value="<:pass_ok:>" /></p>
</div></form>