Détection zone de texte vide, formulaire dans fenêtre modale

**argon** · 15/05/2016, 06h34

Bonjour

JavaScript ne s'active pas à l'ouverture de la fenêtre.

Le problème vient peut-être du formulaire qui est à l'intérieur de la fenêtre modal.

Voici ce que j'ai fais.

Code html:

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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<title>Picardie Network Game</title>
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class="modal fade" id="contact">
<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
           		 <button type="buton" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="modallabelcontact">Contact</h4>
 
						<div class="modal-body">
							<form class="form-horizontal" role="form" id="formcontact" action="contact.php" method="post">
                            			<div class="form-group">
                                        	<label for="nom" id="lnom" class="col-lg-3 control-label">votre nom:</label>
                                        	<div class="col-lg-5">
                                            	<span class="error"></span>
                                        		<input type="text" class="form-control" name="nomcontact" id="nomcontact" placeholder="votre nom">
                                        </div>
                                        </div>
 
                                        <div class="form-group">
                                        <span class="error"></span>
                                        	<label for="lmailcontact" class="col-lg-3 control-label">Votre email:</label>
                                        <div class="col-lg-5">
                                            <input type="text" class="form-control"  name="mailcontact" id="mailcontact" placeholder="Votre email">
                                        </div>
                                        </div>
										<div class="form-group">
											<label for="lmessage" class="col-lg-3 control-label">Votre message:</label>
										<div class="col-lg-5">
											<textarea class="form-control" rows="5" name="message" id="message"></textarea>
 
										</div>
										</div>
                                        <div class="form-group">
                                        <div class="col-lg-offset-3 col-lg-8">
                                        <button type="submit" id="submitcontact" class="submit">Envoyer</button>
                                        </div>
                                        </div>
												</form>
 
 
 
				</div>
			</div>
		</div>
	</div>
</div>
 
<footer class="footr text-center" id="footr" navbar-fixed-bottom >
 
	<div class="container">
		<span id="copy">Copyright@2016 Picardie Network Game</span> <button type="button" id="btncontact" data-toggle="modal" data-target="#contact" >Contact</button>
	</div>
</footer>
 
 
<script src="js/jquery-2.2.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fentrecontact.js" type="text/javascript"></script>
</body>
</html>

Code JavaScript:

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
$(document).ready(function() {
  $('formcontact').submit(function(){
    var valid;
    valid = true;
    if($('#nomcontact').val()=='') {
      $('#nomcontact').prev(.error).fadeIn(1000).text('indiquez votre nom');
      valid = false;
    }else{
      $('#nomcontact').prev(.error).slideUp();
    }
    if($('#mailcontact').val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}[.][a-z]{2,3}$/)){
      $('mailcontact').prev(.error).fadeIn(1000).text('email invalide');
      valid = false;
    }else{
      $('#mailcontact').prev(.error).slideUp();
    }
    if($('#message').val()==''){
      $('#message').prev(.error).fadeIn(1000).text('indiquez votre message');
      valid = false;
    }else{
      $('#message').prev(.error).slideUp();
    }
    if(valid==true)
    {
    var nomcontact = $('#nomcontact').val();
    var mailcontact = $('#mailcontact').val();
    var message = $('#message').val();
    var dataSring = 'nomcontact='+nomcontact+'&mailcontact='+mailcontact+'&message='+message;
      $.ajax({
        type:'POST',
        url:'contact.php',
        data: dataSring,
        });
    }
    return false;
  });
});

Pourriez-vous me dire où se trouve mon ou mes erreur(s) ?

A bientôt

**mathieu** · 16/05/2016, 00h09

avez vous un message d'erreur dans la console de développement ?

**argon** · 16/05/2016, 09h50

Bonjour

Oui, voici les message erreur.

Code :

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

1
2
 
if($('#nomcontact').val()=='')

Et ici

Code :

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

1
2
3
4
5
6
 
$('#nomcontact').prev(.error).fadeIn(1000).text('indiquez votre nom');
		valid = false;
	}else{
 
		$('#nomcontact').prev(.error).slideUp();

Je pense que c'est soit un souci avec les '' ou ==.

Pourriez-vous me dire ce qui ne va pas exactement.

A bientôt

**Toufik83** · 16/05/2016, 14h34

essayez

Code :

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

 $('#formcontact').submit();

et non pas

Code :

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

$('formcontact').submit();

la même chose pour $('#mailcontact')

Code :

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

$('#mailcontact').prev(.error).fadeIn(1000).text('email invalide');

**mathieu** · 16/05/2016, 18h31

en plus des propositions de Toufik83, je pense qu'il faut aussi ajouter des guillemets autour de .error

**Toufik83** · 16/05/2016, 18h42

oui mathieu bien vu.

**argon** · 17/05/2016, 05h51

Bonjour

C'est une erreur d'inattention.

J'ai toujours un souci avec la ligne ci-dessous.

Code :

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

1
2
 
if($('#nomcontact').val()=='')

Je vais essayé de faire ceci.

Code :

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

1
2
 
if($('#nomcontact').val().empty())

A bientôt

**NoSmoking** · 17/05/2016, 16h16

Bonjour,

if($('#nomcontact').val()=='') {

es tu vraiment sûr que c'est cette ligne qui te pose problème, car syntaxiquement elle est correcte attendu que ton élément à bien une value même si mise dans la balise.

Une remarque toutefois lorsque tu écris $('#mailcontact').prev('.error')., il faut que l'élément que tu cherches à cibler se trouve dans le même conteneur que ton <input id="mailcontact"> ce qui n'est pas le cas dans ton code HTML et pendant que j'y suis pas sûr que le test sur la valeur de l'adresse mail soit efficace !

**argon** · 18/05/2016, 06h02

Bonjour

Une remarque toutefois lorsque tu écris $('#mailcontact').prev('.error')., il faut que l'élément que tu cherches à cibler se trouve dans le même conteneur que ton <input id="mailcontact"> ce qui n'est pas le cas dans ton code HTML et pendant que j'y suis pas sûr que le test sur la valeur de l'adresse mail soit efficace !

Pour positionner les élément du formulaire j'utilise les div, pensez-vous que c'est ça qui me pose problème.

Je devrais peut-être utiliser le CSS pour construire le formulaire ?

A bientôt

**NoSmoking** · 19/05/2016, 19h21

...j'utilise les div, pensez-vous que c'est ça qui me pose problème.

pour atteindre un prev() cela peut être une raison comme déjà dit :
• OK

Code html :

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

1
2
3
4
<div class="col-lg-5">
    <span class="error"></span>
    <input type="text" class="form-control" name="nomcontact" id="nomcontact" placeholder="votre nom">
</div>

• NOK

Code hml :

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

1
2
3
4
5
6
7
<div class="form-group">
    <span class="error"></span>
    <label for="lmailcontact" class="col-lg-3 control-label">Votre email:</label>
    <div class="col-lg-5">
        <input type="text" class="form-control"  name="mailcontact" id="mailcontact" placeholder="Votre email">
    </div>
</div>

Détection zone de texte vide, formulaire dans fenêtre modale

jQuery

Discussions similaires

Partager

Partager