Datepicker et validation au blur

**almoha** · 14/11/2012, 20h26

Bonjour,

Je valide des champs au blur : s'ils sont vides, j'affiche un message. J'ai un souci sur un champ auquel est attaché un UI Datepicker. Lorsque je choisis une date, mon message d'erreur s'affiche alors que le champ n'est plus vide :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<head>
<script language="Javascript">
$(function() {
 
  $('input:text, textarea').each(function(){
 
     $('input:text, textarea').blur(function(){ 
 
          if($(this).val()!=="")
          {
          $(this).next(".erreur").hide();
          }
	  else
	  {
          $(this).next(".erreur").show().text('erreur');
	  }
 
    });
 
  });
 
	$("input").bind("focusout", function(event){//astuce Daniel Hagnoul
	    if ($(".ui-datepicker").is(":visible")){
	    console.log("C'est le datepicker : " + event.target);
	    return false; // on bloque l'événement
	    }
 
          });
 
	 $( "#datepub_insert" ).datepicker({
 
		changeMonth: true,
		changeYear: true,
		maxDate: "+0D",	
		buttonImage: "styles/img/calendar.gif",
		buttonImageOnly: true ,
		showButtonPanel : true
 
 
		});
 
});
</script>
<head>
 
<body>
<input id="datepub_insert"/>
<span style="display:none; color:#F00;" class="erreur"></span> 
</body>

Malgré l'astuce de Daniel Hagnoul, je n'arrive pas éviter l'affichage du message alors que le champ n'est plus vide. Voyez-vous comment procéder ? Merci.

**danielhagnoul** · 14/11/2012, 21h08

Bonsoir

EDIT 2012-11-15 : version corrigée !

Le code de ma page de test, il suffit de copier-coller pour tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
		input { border: 0.1rem dotted black; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
<p>
	<label>Date : </label> <input id="datepub_insert" type="text" /> <span style="display:none; color:#F00;" class="erreur"></span>
</p>
<p>
	<label>Texte : </label> <input type="text" /> <span style="display:none; color:#F00;" class="erreur"></span>
</p>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-10-31T20:41:57.21+01:00" pubdate>2012-10-31T20:41:57.21+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );			
 
			$("input[type='text'], textarea").on( "focusout", function(){
				if ( $(".ui-datepicker").is( ":visible" ) ){
					return false; // on bloque l'événement
				} else if ( $( this ).val().length > 0 ){
					$( this ).next(".erreur").hide();
				} else {
					$( this ).next(".erreur").show().text('erreur');
				}
			});
 
			$( "#datepub_insert" ).datepicker({
				changeMonth : true,
				changeYear : true,
				maxDate : "+0D",
				buttonImage : "styles/img/calendar.gif",
				buttonImageOnly : true,
				showButtonPanel : true,
				onClose : function( date, datepicker ){
					// ici this est l'input !!!
 
					if ( date == "" ){
						$( this ).next(".erreur").show().text('erreur');
					} else {
						$( this ).next(".erreur").hide();
					}
				}
			});
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

**almoha** · 15/11/2012, 21h41

Bonsoir,

J'ai testé votre code. Le message d’erreur ne s'affiche plus inopportunément lorsque je selectionne une date. Mais le problème c'est qu'il ne s'affiche plus alors qu'il le devrait : je me positionne sur le champ et je tabule sans sélectionner de date et je laisse donc le champ vierge. Le message devrait s'afficher...mais ce n'est pas le cas. Voyez-vous pourquoi ? Merci.