11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un petit souci depuis que j'ai voulu mettre un DatePicker dans mon formulaire.
Ce formulaire avait une validation par Jquery Validation, et cela ne fonctionne plus depuis que j'ai ajouté le DatePicker.

Voici le script de vérification du formulaire :
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="./jquery/jquery.validate.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>
	$(document).ready(function () {
		$("#formulaire").validate({
			rules:{
			 date: {required: true},
			 titre: {required: true, maxlength: 25},
			 commentaire: {required: true, maxlength: 100},
			 userfile : {required: true, accept: "application/jpg" },
			},
			messages: {
			 date: {required: "Veuillez compléter ce champ."},
			 titre: {required: "Veuillez compléter ce champ.", maxlength: "Le titre ne doit pas comporter plus de 25 caractères."},
			 commentaire: {required: "Veuillez compléter ce champ.", maxlength: "Le commentaire ne doit pas comporter plus de 100 caractères."},
			 userfile: {required: "Veuillez choisir un document.", accept: "Le type de fichier n'est pas valide."},
			}
		});
	});
</script>


Et voici le script du DatePicker :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
	$(function() {
		$.datepicker.setDefaults($.datepicker.regional['fr']);
		$(".datepicker").datepicker({
			dateFormat: 'dd/mm/yy'
		});
	})
</script>


J'ai l'impression qu'il y a un conflit... Mais je n'y connais pas grand chose.
A votre avis?
J'aurais aimé mettre les deux fonctions dans le même script aussi si possible, ou nettoyer un peu mon code, si vous voyez ce que je veux dire...

Merci d'avance pour votre aide et vos retours.
Modifié par Alexbass (20 Jan 2016 - 16:36)
Re-bonjour,

J'ai mis en commentaire, les références style et js du datepicker, et ma validation fonctionne de nouveau.

Dans ma feuille, les deux codes se suivent... et cela doit créer un conflit, mais je ne sais pas trop a quel niveau...

Merci d'avance.

Le code du fomulaire pour ceux qui veulent tester :

<form id="formulaire" class="formulaire" action="admin_modif_photos.php" method="post" enctype="multipart/form-data">
<table class="table responsive-table">
 <tbody>
  <tr>
   <th colspan="2">Informations sur la photo</th>
  </tr>
  <tr class="row2">
   <td><label for="titre">Titre* :</label></td>
   <td><input id="titre" type="text" name="titre" placeholder="titre de la photo" value="" required/></td>
  </tr>
  <tr class="row1">
   <td><label for="date">Date* :</label></label></td>
   <td><input id="date" type="text" name="date" placeholder="jj/mm/aaaa"  value="" required/></td>
  </tr>
<!--class="datepicker saisiedate"-->
  <tr class="row2">
   <td><label>Photo :</label></td>
   <td><input id="userfile" name="userfile" type="file" size="50" required value=""/></td>
  </tr>
  <tr class="row1">
   <td><label for="commentaire">Commentaire* :</label></td>
   <td><input id="commentaire" type="text" size="50" name="commentaire" placeholder="commentaire" value="" required/></td>
  </tr>
  <tr class="subfoot">
   <td colspan="2"><input type="submit" name="Valider" value="Valider" title="Cliquez ici pour valider"></td>
  </tr>
 </tbody>
</table>
</form>
Je pense que j'ai trouvé ce qui était en conflit :

Validation :
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

DatePicker :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

J'ai mis la référence du Datepicker en commentaire et mes validations fonctionnent et mon Datepicker aussi...
vous confirmez qu'il y avait bien conflit?