Vous aimez ? Like-Rankez ;) Like-Rank


    



Classement des meilleurs actualitées SEO et webmarketing du moment







18h57
16/04

Validation automatique des données saisies avec HTML5 et Spring3

J’ai appris il y a longtemps qu’il était toujours nécessaire de contrôler et valider les données saisies par vos utilisateurs, du côté client comme du côté serveur (en HTML/JavaScript et en Java pour ma part), car généralement les erreurs ou les attaques viennent de là. Je n’ai jamais apprécié personnellement cette partie du travail car c’est à chaque fois la même chose et à chaque fois on doit tout refaire à la main …

Validation côté client (HTML5)

Avec HTML5 la validation de surface se fait déjà plus aisément, les nombreux « type » paramétrable dans nos champs de saisie limitent considérablement la saisie au mauvais format, exemple : , , , … (liste complète ici avec support des différents navigateurs).

Ensuite de nouveaux attributs ont vu le jour comme required, min, max, list … qui nous évitent de devoir contrôler que le champ est bien saisi, qu’il est compris dans un intervalle donné ou bien qu’il fait partie d’une liste prédéfinie de valeurs.

Dans mon nouveau projet j’utilise HTML5 comme validateur client de surface plutôt que JavaScript.

Les données envoyées au serveur sont au format JSON, la transformation de mon formulaire en objet JSON est faite avec form2js et l’envoi se fait avec jQuery de la façon suivante :




$("form").submit(function(event) {
	var action = $(this).attr('action');
	var formAsObject = $(this).toObject(); // form2js
	$.ajax({
		url: action,
		type: "post",
		data: formAsObject,
		dataType: 'json',
		success: function(jsonFromServer) {
			// callback du serveur
		}
	});
	return false;
});

A retenir : il faut utiliser la méthode « submit » de jQuery sur le formulaire plutôt que la méthode « on » ou « bind » sur le bouton submit car sinon la validation des données en HTML5 ne se fera pas.

Validation côté serveur (Spring3)

C’est là que Spring3 entre en jeu ainsi que ses nombreuses annotations qui nous facilitent la tâche, dans notre cas je parle de @ModelAttribute et @Validated.

@RequestMapping(value="/login", method=RequestMethod.POST)
@ResponseBody
public UserModel login(@Validated({ UserLoginGroup.class }) @ModelAttribute UserModel user, BindingResult result, HttpServletRequest request, HttpServletResponse response) {
	// validation de surface faite avec @annotations
	if (result.hasErrors()) {
		// des erreurs de validation
	} else {
		// aucune erreur de validation en surface
	}
}

La première (@ModelAttribute) permet de transformer automatiquement l’objet json envoyé par notre requête Ajax en objet Java : chaque attribut de l’objet json ayant le même nom (case sensitive) qu’un attribut de l’objet Java sera récupéré automatiquement.

La seconde (@Validated) indique que l’objet annoté doit être validé, la validation est écrite uniquement via des annotations, il en va de même pour les messages d’erreur à retourner. J’utilise les annotations de Hibernate Validator qui offrent un plus grand choix, allant de @Email à @NotBlank en passant par @Future pour valider que la date saisie est dans le futur.

Malheureusement il n’existe encore aucun moyen nativement de comparer deux attributs de l’objet à valider, par exemple « email » et « emailConfirm » ou encore « password » et « passwordConfirm », la communauté s’en est chargé en créant une annotation maison « FieldMatch » que j’utilise et qui marche à merveille, voici le lien vers cette annotation.

Vous l’avez compris, avec Spring3 la validation côté serveur est rendue très simple, voici un copier coller d’un objet que je valide automatiquement avec cette méthode :

@FieldMatch.List({
    @FieldMatch(first = "password", second = "passwordConfirm", message = "Votre confirmation de mot de passe est invalide", groups = { UserRegisterGroup.class }),
    @FieldMatch(first = "email", second = "emailConfirm", message = "Votre confirmation d'email est invalide", groups = { UserRegisterGroup.class })
})
public class UserModel implements Serializable {
	private static final long serialVersionUID = -6014837207296264624L;
	@NotBlank(message = "Votre email est obligatoire", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	@Email(message = "Votre email a un format incorrect", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	@Length(min=3, max=100, message = "Votre email doit faire entre 3 et 100 caractères", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	private String email;
	// FieldMatch suffit pour les contrôles
	private String emailConfirm;
	@NotBlank(message = "Votre mot de passe est obligatoire", groups = { UserLoginGroup.class, UserRegisterGroup.class })
	@Length(min=6, max=100, message = "Votre mot de passe doit faire entre 6 et 100 caractères", groups = { UserLoginGroup.class, UserRegisterGroup.class })
	private String password;
	// FieldMatch suffit pour les contrôles
	private String passwordConfirm;
	
			

Suite de l'article : validation automatique des donnees saisies avec html5 et spring3





Après :
18 avril 2012
16h02 60 fiches pour reussir son site web 60 fiches pour réussir son site web
15h55 130 services a connaitre pour mieux utiliser twitter 130 services à connaître pour mieux utiliser Twitter
14h07 larry ellison revele avoir voulu acheter rim et palm solutions gt oracle Larry Ellison révèle avoir voulu acheter RIM et Palm [Solutions > Oracle]
14h06 sommet mondial du numerique a paris Sommet mondial du numérique, à Paris
13h56 une industrie particulierement polluante solutions gt le cloud computing une industrie particulièrement polluante ? [Solutions > Le Cloud Computing]
13h00 ce qu il ne faut pas faire social media ce qu’il ne faut pas faire [Social media]
11h55 nouveau principe de correspondance pour les expressions et mots cles exacts Nouveau principe de correspondance pour les expressions et mots clés exacts
11h40 se connecter facilement avec n importe qui en ligne avec hachi Se connecter facilement avec n'importe qui en ligne avec Hachi
11h11 la video du mercredi la peche La vidéo du Mercredi: la pêche!
10h41 les resultats des elections presidentielles 2012 sur google maps Les résultats des élections présidentielles 2012 sur Google Maps
  9h59 accepter ou pas une demande d ami sur facebook Accepter ou pas une demande d'ami sur Facebook ?
  8h26 strategie seo infographie stratégie SEO [Infographie]
  7h05 changer l url de wordpress Changer l’URL de WordPress
  5h49 les avantages du guest posting Les avantages du guest posting
  3h59 suivre l etat de mon referencement Suivre l’état de mon référencement
  3h56 comment generer de l argent avec wp robot Comment générer de l’argent avec WP Robot ?
17 avril 2012
21h43 infographie quels reseaux sociaux utiliser comment et pourquoi Infographie – Quels réseaux sociaux utiliser, comment et pourquoi?
20h38 suite et fin election presidentielle 2012 et google suite et fin? [Election présidentielle 2012 et Google]
17h28 le ouistiti est dans la place Le Ouistiti est dans la place
17h13 le mcbaguette arrive chez mcdonald s publicite le McBaguette arrive chez McDonald's [Publicité]
15h39 vos tweets sur facebook sans spammer vos amis twittus vos tweets sur Facebook sans spammer vos amis [Twittus]
14h23 l interview de herve weytens les jeunes diplomes et l experience l'interview de Hervé Weytens [Les jeunes diplômés et l'expérience]
14h12 e business gt mediametrie et google travaillent sur un panel quot television et internet quot e-Business > Médiamétrie et Google travaillent sur un panel "Télévision et Internet"
13h22 un menu ecommerce rapide d utilisation Un menu ecommerce rapide d'utilisation
13h21 le ouistiti est dans la placeet j ai un cadeau pour vous Le ouistiti est dans la place…Et j’ai un cadeau pour vous !
13h17 yandex propose une carte de credit Yandex propose une carte de crédit
12h44 plus de transparence pour plus d efficacite niveau de qualite plus de transparence pour plus d'efficacité [Niveau de qualité]
12h31 e business gt google drive est dans les starting blocks pour concurrencer dropbox e-Business > Google Drive est dans les starting blocks pour concurrencer Dropbox
12h30 solutions gt google met en place les rich snippets pour les e commercants Solutions > Google met en place les rich snippets pour les e-commerçants
12h14 encourager un bouton dislike sur facebook Encourager un bouton dislike sur Facebook
11h48 solutions gt chrome rattrape firefox en france Solutions > Chrome rattrape Firefox en France
11h34 twitter outil pour les tpe et pme Twitter, outil pour les TPE et PME
11h02 quand et comment utiliser les reseaux sociaux pour une entreprise Quand et comment utiliser les réseaux sociaux pour une entreprise
11h01 gagnez des liens digg impossible gagnez des liens [Digg:Impossible]
10h06 remportez votre sticker mural avec zhao deco Remportez votre sticker mural avec Zhao Deco
10h01 votre timeline facebook facon microsoft a year in the like votre timeline Facebook façon Microsoft [A Year in the Like]
  9h14 les 7 techniques pour ruiner votre relation avec vos prospects par email Les 7 techniques pour ruiner votre relation avec vos prospects par email
  9h10 comment determiner la qualite d un lien infographie comment déterminer la qualité d'un lien ? [Infographie]
  8h50 solutions gt quot toutes les requetes ne se pretent pas a la personnalisation des resultats quot Solutions > "Toutes les requêtes ne se prêtent pas à la personnalisation des résultats"
  2h28 postez vos article Postez vos article
16 avril 2012
20h42 solutions gt quot en referencement naturel certains backlinks peuvent etre toxiques quot Solutions > "En référencement naturel, certains backlinks peuvent être toxiques"
20h13 e business gt quot je deposerai un nouveau projet de loi visant a taxer les geants du web en juillet quot e-Business > "Je déposerai un nouveau projet de loi visant à taxer les géants du web en juillet"
18h57 validation automatique des donnees saisies avec html5 et spring3 Validation automatique des données saisies avec HTML5 et Spring3


twitter WRM














gauche
Sous menu










Consultez le classement des sites par qualité

Explication simple et courte du Quality rank

Ajoutez un site dans le classement

Modifier la fiche d'information d'un site




Logiciel de référencement 100 % gratuit,
suivez et optimisez la position de vos mots clefs sous Google



Calculez la moyenne du pagerank d'un site

Recherchez le Quality Rank d'un site

Recherchez le pagerank sur plus de 40 serveurs de Google