Champs formulaire obligation

**shaiyajoueur** · 17/05/2013, 11h21

Bonjour,
Je sais que le sujet a été maintes fois traités mais depuis trois jour , je teste tous les codes que j'ai trouvé mais aucun ne fonctionne.
Voici mon formulaire simplifié:

Code html :

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
<form method="post" action="page2.php">
	<p>*: obligatoires. </p>
	<div >
		<label cfor="nom">Votre nom* :</label>
		<input type="text" name="nom" id="nom"  />
	</div>
	<div >
		<label  for="adresse">Adresse* :</label>
		<input  type="text" name="adresse" id="adresse"  />
	</div>
	<div >
		<label  for="ville">Ville* :</label>
		<input  type="text" name="ville" id="ville"  />
	</div>
	<div >
		<label  for="tel">Télephone* :</label>
		<input  type="text" name="tel" id="tel"  />
	</div>
	<div >
		<label  for="mail">E-mail* :</label>
		<input type="text" name="mail" id="mail"  />
	</div>
	<div >
		<label  for="fax">Fax* :</label>
		<input type="text" name="fax" id="fax"  />
	</div>
	</div>
	<p><input id="envoi" type="submit" value="Envoyer" /></p>
</form>

Je voudrais faire apparaitre une fenetre d'alerte quand ces champs ne sont pas remplis (si possible à côté) . J'ai essayé ceci (notamment) sans effet:

Code :

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

1
2
3
4
5
6
7
8
9
10
$(function() {
	$("#form").bind('submit', function(){
 
 $("#nom,#adresse,#ville,#tel,#fax,#mail").change(function(){
	 if ($(this).val=="")
	 {
		alert("Vous devez remplir les champs obligatoire!");
	 }
    });
});

Merci de votre aide.

**Bovino** · 17/05/2013, 11h37

Ta logique est mauvaise...
Dans ton code, tu demandes, lorsque le formulaire est soumis, de vérifier lorsqu'un champ perd le focus s'il est non vide, cette séquence n'arrive bien évidemment jamais.
Il faut donc supprimer le $("#form").bind(...) (et au passage, utilise plutôt la méthode .on() plus adaptée) et ça devrait fonctionner un peu mieux, bien que je ne pense pas que la logique soit la meilleure !

D'autre part, n'hésite pas à utiliser l'attribut HTML required dans tes champs.

**Philcmoi** · 18/05/2013, 10h53

Le code est jquery que l'on trouve au plugin jquery,ui,easy

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<style type="text/css">
		#ff label{
			display:block;
			width:100px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#ff').form({
				url:'form3_proc.php',
				onSubmit:function(){
					return $(this).form('validate');
				},
				success:function(data){
					$.messager.alert('Info', data, 'info');
				}
			});
		});
	</script>
</head>
<body>
	<div style="width:230px;background:#fafafa;padding:10px;">
		<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
		<form id="ff" method="post">
			<div>
				<label for="name">Name:</label>
				<input class="easyui-validatebox" type="text" name="name" required="true"></input>
			</div>
			<div>
				<label for="email">Email:</label>
				<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
			</div>
			<div>
				<label for="subject">Subject:</label>
				<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
			</div>
			<div>
				<label for="message">Message:</label>
				<textarea name="message" style="height:60px;"></textarea>
			</div>
			<div>
				<input type="submit" value="Submit">
			</div>
		</form>
	</div>
</body>
</html>

et ca pour le traitement du formulaire

Code html :

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

1
2
3
4
5
6
7
8
9
10
<?php
 
$name = $_POST['name'];
$email = $_POST['email'];
$subject  = $_POST['subject'];
$message   = $_POST['message'];
 
echo "Name: $name <br/> Email: $email <br/> Subject: $subject <br/> Message:$message";
 
?>

Merci si vous pouvez me dire comment traiter ce formulaire avec java.

Champs formulaire obligation

jQuery

Vue hybride

Discussions similaires

Partager

Partager