Validation formulaire avec jquery Validity

Fermé
ElPadréé Messages postés 3 Date d'inscription jeudi 23 mai 2013 Statut Membre Dernière intervention 27 mai 2014 - 26 mai 2014 à 14:58
Bonjour, je recherche une solution à mon programme afin de rendre les bordures rouges lorsque le formulaire est incomplet. Je recherche aussi le procédés afin de changer la position des messages d'erreurs si vous savez, dites le moi dés que possible, merci!
PS: 6h que je suis dessus alors ne me dite pas que je n'ai pas cherché de solution.
je vous poste mon code:



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery/dist2/jquery.validity.js"></script>
<title>Formulaire d'inscription</title>

<style>

body {
background-color:#d5d5e1;
}

form{
background-color:#fff;
border: 2px solid #919191;
box-shadow: 7px -5px 25px 0px #000000;
border-radius: 15px;
margin-top:20px;
margin-left: 5px;
margin-right: 5px;
width: 1244px;
height: 850px
}

h2{
text-align: center;
text-shadow: 2px -1px 0px rgba(35, 35, 130, 0.34);
font-size: 35px;
font-family: lucida;
font-weight: lighter;
}

h3{
text-align: center;
text-shadow: 2px -1px 0px rgba(130, 35, 35, 0.34);
font-size: 25px;
font-style: italic;
font-family: monospace;
}

h4{
text-align: center;
font-size: 18px;
font-style: italic;
font-family: monospace;
margin-top: 5px;
margin-bottom: 5px;
}

label{
padding-left: 5px;
width: 175px;
float:left;
}

input[type="text"], textarea{
border-color:blue;
}

.cadregauche{
float: left;
width: 621px;
border-top: 1px solid grey;
border-collapse: separate;
}

.cadredroite{
float: left;
width: 622px;
border-left: 1px solid grey;
border-top: 1px solid grey;
border-collapse: separate;
}

.cadreseul{
width: 1245px;
border-top: 1px solid grey;
border-collapse: collapse;
}

.cadretitre{
width: 1245px;
border-top: 1px solid grey;
}

.cadretableau{
float left;
width: 621px;
border-right: 1px solid grey;
border-top: 1px solid grey;
}

.cadretableau2{
float left;
width: 621px;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
}

.cadrebutton{
width: 622px;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}

.clearBoth {
clear: both;
}

</style>



</head>

<body>
<form method="post" action="" id="FormulaireInscription">

<h2>Fiche de liaison projet de formation</h2>

<div class="cadregauche">
<label for="prescripteur"> Prescripteur :</label>
<input type="text" name="prescripteur" id="prescripteur"/>
</div>

<div class="cadredroite">
<label for="organisme"> Organisme de formation :</label>
<input type="text" name="organisme" id="organisme"/>
</div>

<div class="cadregauche">
<label for="conseiller"> Nom du conseiller :</label>
<input type="text" name="conseiller" id="conseiller"/>
</div>

<div class="cadredroite">
<label for="courriel1"> Courriel référent :</label>
<input type="text" name="courriel1" id="courriel1"/>
</div>

<div class="clearBoth"></div>

<div class="cadretitre">
<h3>
Identification du demandeur
</h3>
</div>

<div class="clearBoth"></div>

<div class="cadreseul">
<label for="identifiant"> N° identifiant* :</label>
<input type="text" name="identifiant" id="identifiant" />
</div>

<div class="cadregauche">
<label for="nom"> Nom* :</label>
<input type="text" name="nom" id="nom" />
</div>

<div class="cadredroite">
<label for="prenom"> Prénom* :</label>
<input type="text" name="prenom" id="prenom" />
</div>

<div class="clearBoth"></div>

<div class="cadreseul">
<label for="dateN"> Date de naissance* :</label>
<input type="text" name="dateN" id="dateN" />(jj/mm/aaaa)
</div>

<div class="cadregauche">
<label for="telephone"> Téléphone* :</label>
<input type="text" name="telephone" id="telephone"/>
</div>

<div class="cadredroite">
<label for="courriel2"> Courriel :</label>
<input type="text" name="courriel2" id="courriel2"/>
</div>

<div class="clearBoth"></div>

<div class="cadreseul">
<label for="adresse"> Adresse :</label>
<input type="text" name="adresse" id="adresse"/>
</div>

<div class="cadreseul">
<label for="inscription"> Inscription Pole Emploi :</label>
<input type="text" name="inscription" id="inscription"/>(jj/mm/aaaa)
</div>

<div class="clearBoth"></div>

<div class="cadretitre">
<h3>
Informations
</h3>
</div>

<div class="clearBoth"></div>

<div class="cadregauche">
<h4>
Prescription
</h4>

<div class="cadretableau">
<label for="projetprof"> Projet professionnel :</label>
<textarea name="projetprof" id="projetprof"></textarea>
</div>

<div class="cadretableau">
<label for="projetform"> Projet de formation :</label>
<textarea name="projetform" id="projetform"></textarea>
</div>

<div class="cadretableau">
<label for="prerequis"> Pré-requis identifiés :</label>
<textarea name="prerequis" id="prerequis"></textarea>
</div>

<div class="cadretableau">
<label for="datePr"> Date de la prescription* :</label>
<input type="text" name="datePr" id="datePr"/>
</div>

<div class="cadretableau2">
<label for="observations"> Observations :</label>
<textarea name="observations" id="observations"></textarea>
</div>
</div>

<div class="cadredroite">
<h4>
Retour organisme de formation
</h4>
<div class="cadrebutton">
<center>
<input type="submit" value="Envoyer le formulaire" name="valider">
<input type="reset" value="Remettre à zéro" name="reset">
</center>
</div>
</div>

<div class="clearBoth"></div>

</form>
</body>
</html>

<script>

$(document).ready(function() {
$("form").validity(function() {
$("#identifiant")
.require()
.match("number")
$("#nom")
.require()
.match("text")
.minLength(2);
$("#prenom")
.require()
.match("text")
.minLength(2);
$("#dateN")
.require()
.match("date");
$("#telephone")
.require()
.match("phone");
$("#datePr")
.require()
.match("date");
$("#courriel1")
.match("email");
$("#courriel2")
.match("email");
$("#inscription")
.match("date");
$("#prescripteur")
.match("text")
.minLength(2);
$("#organisme")
.match("text")
.minLength(2);
$("#conseiller")
.match("text")
.minLength(2);
$("#adresse")
.match("text2")
.minLength(10);
$("#projetprof")
.match("text2")
$("#projetform")
.match("text2")
$("#prerequis")
.match("text2")
$("#observations")
.match("text2")
});

$.validity.setup({ defaultFieldName:"Ce champ", });

$.extend($.validity.messages, {
require:"#{field} est requis.",

// Format validators:
match:"#{field} est dans un mauvais format.",
integer:"#{field} doit être un nombre entier positif.",
date:"#{field} doit être une date.",
email:"#{field} doit être une adresse email.",
url:"#{field} doit être une adresse URL.",
number:"#{field} doit être un nombre.",
zip:"#{field} doit être un code postal ##### ou #####-####.",
phone:"#{field} doit être un numéro de téléphone ##-##-##-##-##.",
time24:"#{field} doit être une heure au format 24 heures (ex: 23:00).",
time12:"#{field} doit être une heure au format 12 heures (ex:12:00 AM/PM)",

// Value length messages:
tooLong:"#{field} ne doit pas dépasser #{max} caractères.",
tooShort:"#{field} doit contenir au minimum #{min} caractères.",

// Composition validators:
minCharClass:"#{field} ne doit pas contenir plus de #{min} #{charClass} caractères.",
maxCharClass:"#{field} ne doit pas contenir moins de #{min} #{charClass} caractères.",

generic:"Invalide."
});
});

</script>