Dans le billet précédent nous avons vu comment intégrer un DatePicker à notre formulaire, cette étape finalisait la validation côté serveur. Cependant, nous avons également besoin d'une validation en amont, côté client. Voyons comment l'ajouter.

Ajout du Behavior Yav

Ce que nous voulons côté client, c'est appliquer les mêmes règles de validation que côté serveur. Pour cela, nous faisons appel au plugin Yav, un composant "made in" Zenika intégré dans le projet Wicket Stuff. Wicket Stuff-Yav a pour but d'intégrer Yav un framework de validation purement Javascript à Wicket.

Nous ajoutons tout simplement une instance du Behavior Yav à notre formulaire.

public class EditContactPage extends TemplatePage {
 
    public EditContactPage() {
    super();
    add(new EditContactFrom("editform", new Contact()));
 
    }
 
    public class EditContactFrom extends Form {
 
    public EditContactFrom(String id, Contact contact) {
        super(id);
 
        setModel(new CompoundPropertyModel(contact));
 
        add(new TextField("prenom").setRequired(true));
        add(new TextField("nom").setRequired(true).add(
            new MaximumLengthValidator(10)));
        add(new TextField("dateNaissance", Date.class)
            .add(new DatePicker()));
        add(new TextField("email").add(EmailAddressValidator.getInstance()));
 
        add(new FeedbackPanel("feedback"));
 
        add(new YavBehavior());
    }
 
    @Override
    protected void onSubmit() {
        Contact contact = (Contact) getModelObject();
 
        ZenContactApplication.get().getContacts().add(contact);
 
        setResponsePage(ListContactPage.class);
    }
 
    }
}

Nous pouvons tester la validation côté client : http://localhost:8080/zencontact

C'était la dernière étape de l'implémentation de la création de contacts. Dans un prochain billet nous verrons comment éditer rapidement ces contacts nouvellement créés avec un peu d'AJAX.

Précédent : Zencontact 11 - DatePicker