Discussion :

[maysa]

Bonjour,

j'ai un formulaire avec mes champs requis avec l'option HTML "required". Quand je clique sur le bouton pour valider mon formulaire, si je mets mes champs à vide j'ai bien la popup "champ requis", mais j'ai aussi le message en cas de succès jquery qui me dit que l'insertion s'est bien passée.

voici mon code HTML :

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
 
<form name="insertAgent" id="insertAgent" class="form-horizontal" method='GET'>
 
						<div class="form-group" id="selectPlateforme">
						  <label class="control-label col-sm-4" for="selection plateforme">Sélectionner une plateforme :</label>
						  <div class="col-sm-6">          
							<select required="required" id="Plateforme" data-actions-box="true" class="selectpicker show-tick " data-width="75%" data-style="btn-info" data-live-search="true"></select>		
						  </div>
						</div>
						<div class="form-group" id="selectAgent">
						  <label class="control-label col-sm-4" for="selection BG">Sélectionner un Agent </label>
						  <div class="col-sm-6">          
							<select required id="AgentPlateforme" name="agentPlateforme[]" class="selectpicker show-tick" data-actions-box="true" data-width="75%" data-style="btn-secondary" multiple data-max-options="20" data-live-search="true"></select>		
						  </div>
						</div>
						<div class="form-group"> 
						<input type="submit"  class="btn btn-success center-block" id="ajouteAgent" value="Affecter le(s) matricule(s) à la plateforme"/></div>
						<div id="ResultatInsertion" class="success">Ici le resultat de la requete</div>
					</form>

Mon code JQUERY

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
 
	$('#ajouteAgent').click(function(){
 
        $.ajax({
           type: "GET",
           url: "../php/Admin_Creation.php",
           data : 'ajoutAgent="oui"&MatriculePTG='+$('#Plateforme.selectpicker').val()+'&AgentMatricule='+$('#AgentPlateforme.selectpicker').val(),
           dataType: "json",
		   success: function(json){
			$('#ResultatInsertion').addClass('success');
            $('#ResultatInsertion').html(json);
 
           },
		   error: function (err){
		   $('#ResultatInsertion').html('une erreur s\'est produite pendant l\ajout.');
		   $('#ResultatInsertion').addClass('error');
		   }
        });
});

Question 1 : j'ai remarqué que l'attribut required ne fonctionnait qu'avec un

Code :

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

<input type="submit">

et non <button> ?
Question 2. Dans le jQuery comment faire pour que si mes champs ne sont pas renseignés je ne peux pas rentrer dans le success ?

Merci beaucoup de votre aide.

[SpaceFrog]

passe plutot par le onsubmiut du form ...
avec un return false en cas de required manquant...
là tu n'inhibe pas la soumission du form tu envoies dons l'ajax puis tu soumets

[maysa]

Merci pour ta réponse, mais comment justement gérer le required manquant ?

[SpaceFrog]

ben scanne les elements du form ayant l'attribut required et teste qu'il sont non vides ou != -1

Code :

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

 $('input,textarea,select').attr('required',true)

[maysa]

ok merci. je débute en jQuery.