Validation de formulaire en frontend
J'essaie de préparer mon composant pour une action frontend. Certains formulaires sont remplis par l'utilisateur - mais bien sûr, certains champs nécessitent des valeurs spécifiques (int, float, ...) et certains champs ne doivent pas être vides.
Pour y parvenir, j'ai essayé de créer un formulaire comme celui-ci:
<?xml version="1.0" encoding="utf-8"?>
<form>
<fields name = "user">
<fieldset name = "personal">
<field name = "gender"
type = "list"
class = "form-control"
label = "COM_BESTIA_FIELDS_GENDER_LABEL"
description = "COM_BESTIA_FIELDS_GENDER_DESC"
filter = "safehtml"
required = "true"
default = "">
<option value = "">COM_BESTIA_FIELDS_VALUES_GENDERUNKNOWN</option>
<option value = "f">COM_BESTIA_FIELDS_VALUES_GENDERFEMALE</option>
<option value = "m">COM_BESTIA_FIELDS_VALUES_GENDERMALE</option>
</field>
<field name = "firstname"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_FIRSTNAME_LABEL"
description = "COM_BESTIA_FIELDS_FIRSTNAME_DESC"
required = "true"
filter = "safehtml" />
<field name = "dateofbirth"
type = "calendar"
class = "inputbox form-control"
default = "NOW - 18 years"
label = "COM_BESTIA_FIELDS_DATEOFBIRTH_LABEL"
description = "COM_BESTIA_FIELDS_DATEOFBIRTH_DESC"
required = "true"
format = "%d.%m.%Y"
filter = "safehtml" />
</fieldset>
<fieldset name = "contact">
<field name = "city"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_CITY_LABEL"
description = "COM_BESTIA_FIELDS_CITY_DESC"
required = "true"
filter = "safehtml" />
<field name = "Zip"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_Zip_LABEL"
description = "COM_BESTIA_FIELDS_Zip_DESC"
required = "true"
filter = "integer" />
<field name = "country"
type = "list"
class = "form-control"
label = "COM_BESTIA_FIELDS_COUNTRY_LABEL"
description = "COM_BESTIA_FIELDS_COUNTRY_DESC"
required = "true"
filter = "safehtml">
<option value = "DE">COM_BESTIA_FIELDS_VALUES_COUNTRYDE</option>
</field>
</fieldset>
</fields>
</form>
Maintenant, je rends les champs dans ma vue frontale:
JHtml::_('behavior.formvalidator');
<form id="save" class="form-validate" action="<?php echo JRoute::_('index.php?option=com_bestia'); ?>" method="post" >
...
<?php echo $this->form->renderFieldset('personal'); ?>
<?php echo $this->form->renderFieldset('contact'); ?>
...
<?php echo JHtml::_( 'form.token' ); ?>
<input type="hidden" name="id" value="<?php echo $this->item->id; ?>" />
<input type="hidden" name="task" value="item.save" />
<button type="submit" class="btn validate">
<?php echo JText::_('COM_BESTIA_SUBMIT', true); ?>
</button>
</form>
Ok, ça marche très bien - toutes les entrées sont disponibles dans le contrôleur où je peux travailler avec elles. Mais malheureusement, je peux soumettre le formulaire même si je laisse les champs obligatoires vides.
Qu'est-ce que j'ai raté? Je pense avoir suivi la documentation de Joomla! mais quelque chose ne va pas ...
Toute aide est la bienvenue!
Modifications:
Sur la base de vos recommandations, j'ai ajouté
<script>
(function($) {
$(document).on('submit', '#item-form', function(e) {
if (task == "item.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
{
Joomla.submitform(task, document.getElementById("item-form"));
}
return false
});
}(jQuery));
</script>
Mais maintenant je reçois les erreurs suivantes:
Il semble que vous soumettiez le de sans exécuter la validation. Avec jQuery, vous pouvez écouter l’événement submit du formulaire, vérifier la validation et soumettre le formulaire s’il réussit.
En haut de votre fichier PHP, ajoutez ce qui suit pour charger la bibliothèque jQuery:
JHtml::_('jquery.framework');
Ajoutez le JS ci-dessous à la page à l'intérieur d'une balise de script:
(function($) {
$(document).on('submit', '#save', function(e) {
if (task == "item.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
{
Joomla.submitform(task, document.getElementById("item-form"));
}
return false
});
}(jQuery));
Cela écoutera et interceptera l'événement de soumission de formulaire. Il vérifie si l'une des deux conditions est la tâche d'annulation ou si le document.formvalidator passe. Si l'une ou l'autre des conditions est remplie, elle soumettra le formulaire. Si aucune de ces conditions n'est remplie, les erreurs de validation de votre formulaire apparaissent et la soumission du formulaire est annulée en renvoyant la valeur false à partir du rappel du gestionnaire d'événements.