Bonsoir

j'ai un formulaire pour mon application, je veut établir une validation des champs avant l'ajout.
j'ai commencer à écrire le code jquery responsable pour cette action, j'ai réussit à entourer le champ avec une bordure rouge mais j'arrive pas a afficher un message d'erreur devant le champ spécifié.

voici mon code
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
<script>
 
$(function() {
    $( "#datepicker" ).datepicker({
                        dateFormat: "yy-mm-dd"
        
    });
    
 
    
    valid = true;
    
   $("#zid").click(function(){
           
           if($("#titre").val() == ""){
                   $("#titre").css('border-color','#ff0000');  
                   $("#titre").next(".error").fadeIn().text("Ce champ ne doit pas être vide"); 
                   
                  valid = false;
           }
           
            return valid;
   });
    
  });
 
</script>
<style type="text/css">
 
.error{
 
border: 1px solid #000;
background-color: #999;
text-align: center;
font-size: 15px;
display: none;
 
}
 
</style>
</head>
<body>
 
<h3>Ajouter un évenement</h3>
 
<form id="addForm" action="AddEvent" method="post">
	<label>Titre * : </label><input type = "text" name="title" id="titre"><br><br>
	<span class="error"></span>
	<label>Description : </label><textarea rows="4" cols="20" name="descrip" id="desc"></textarea><br><br>
	<label>Lieu : </label><input type ="text" name="where" id="maken"><br><br>
	<label>Date de début *: </label><input id ="datepicker" type="text" name="start_date" id="time"><br><br>
	<span class="error"></span>
 
 
	<input type="submit" value="ajouter" name="add" id="zid">
	<input type="reset" value="annuler" name="resetting">
	</form>
 
	<p>les champs avec (*) sont obligatoires </p>
 
 
 
 
 
</body>