# Comment ajouter des conditions avant la sauvegarde dans un formulaire ?

# Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment déclencher un code javascript lors de la sélection d’un menu spécifique ?.

# Comment déclencher du code JavaScript avant la sauvegarde d’un Smart Element ?

On souhaite ajouter une vérification avant la sauvegarde d’un Smart Element Menu afin de vérifier que sa description n’est pas vide et que son prix n’est pas supérieur à trente euros.

L’événement beforeValidate est déclenché avant la sauvegarde d’un Smart Element et peut être écouté au moyen de la méthode addEventListener.

Modifions la classe de rendu du menu en édition pour injecter du code JavaScript :

src/vendor/Cogip/Restauratec/SmartStructures/Menu/Render/MenuEditRender.php :

<?php

namespace Cogip\Restauratec\SmartStructures\Menu\Render;

use Anakeen\Routes\Core\Lib\ApiMessage;
use Anakeen\Ui\CommonRenderOptions;
use Anakeen\Ui\RenderAttributeNeeded;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Menu as MenuFields;
use \Anakeen\Core\Internal\SmartElement;
use SmartStructure\Renderdescription;

class MenuEditRender extends \Anakeen\Ui\DefaultConfigEditRender
{
    [...]

    /**
     * @param SmartElement|null $document
     * @return array
     */
    public function getJsReferences(\Anakeen\Core\Internal\SmartElement $document = null): array
    {
        $js = parent::getJsReferences($document);
        $js['menuEdit'] = new \Anakeen\Ui\JsAssetReference("/menuEdit.js");
        return $js;
    }
}

Créer le fichier src/public/menuEdit.js :

window.ank.smartElement.globalController.registerFunction("menuEdit", (controller) => {
  controller.addEventListener("beforeValidate", function eventBeforeSave(event, documentObject, data) {
    const description = controller.getValue("menu_description").value;
    if (description == null) {
      event.preventDefault();
      controller.showMessage({
        type: "error",
        message: "Le menu n’a pas de description.",
      });
    }
    const price = controller.getValue("menu_price").value;
    if (price > 30) {
      event.preventDefault();
      controller.showMessage({
        type: "warning",
        message: "Le menu est au-dessus de 30 €",
      });
    }
  });
});

Vous pouvez maintenant déployer vos modifications :

npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall

Et voir le résultat sur un MENU en création ou modification :

http://localhost:8080/api/v2/smart-elements/MENU/views/!defaultCreation.html

# Et ensuite ?

Comment afficher les Smart Fields de manière conditionnelle ?