Javascript redirection astuce

Fermé

TheBleedz - 20 juil. 2011 à 16:04
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 - 20 juil. 2011 à 21:10

Bonjour,
Voila j'ai un formulaire en HTML et Javascript ! Ou le Javascript vérifie en temps réel si les caractères sont correcte ou non. Et une fois qu'on clique sur le bouton "Inscription" pour valider le formulaire le Javascript verifie encore une fois si touts est bien remplie si oui il redirige vers la page PHP qui vas traiter et enregistre et vérifier ( encore une fois ) si touts est bien remplie ! Mais gros problème... Quand par exemple on remplie rien, et on clique sur "Inscription" ca nous mais le message "Le formulaire est mal remplie" jusque la ca va mais une fois qu'on clique sur Ok il me redirige vers la page PHP !!! Mais j'aimerai qu'il reste sur la page index.php t'en que le formulaire n'est pas correct. C'est possible ?
Voici mon code de ma page index.php
<body>
<style>body {
padding-top: 50px;
}

.form_col {
display: inline-block;
margin-right: 15px;
padding: 3px 0px;
width: 200px;
min-height: 1px;
text-align: right;
}

input {
padding: 2px;
border: 1px solid #CCC;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

input:focus {
border-color: rgba(82, 168, 236, 0.75);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}

.correct {
border-color: rgba(68, 191, 68, 0.75);
}

.correct:focus {
border-color: rgba(68, 191, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
}

.incorrect {
border-color: rgba(191, 68, 68, 0.75);
}

.incorrect:focus {
border-color: rgba(191, 68, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
}

.tooltip {
display: inline-block;
margin-left: 20px;
padding: 2px 4px;
border: 1px solid #555;
background-color: #CCC;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
</style>
<?php
session_start();
header('Content-type: text/html; charset=utf-8');
include('config.php');

/********Actualisation de la session...**********/

include('fonctions.php');
connexionbdd();
actualiser_session();

/********Fin actualisation de session...**********/

if(isset($_SESSION['membre_id']))
{
header('Location: '.ROOTPATH.'/index.php');
exit();
}
?>
<form method="post" name="formulaire" id="myForm">
<label for="pseudo" class="form_col">Pseudo :</label>
<input type="text" name="pseudo" id="pseudo" size="30" /><span class="tooltip">compris entre 3 et 32 caractères</span>
<br /><br />

<label for="mdp" class="form_col">Mot de passe :</label>
<input type="password" name="mdp" id="mdp" size="30" /><span class="tooltip">compris entre 4 et 50 caractères</span>
<br /><br />

<label for="mdp_verif" class="form_col">Mot de passe (vérification) :</label>
<input type="password" name="mdp_verif" id="mdp_verif" size="30" /><span class="tooltip">Le mot de passe ne correspond pas !</span>
<br /><br />
<label for="prenom" class="form_col">Prenom :</label>
<input type="text" name="prenom" id="prenom" size="30" /><span class="tooltip">compris entre 3 et 32 caractères</span>
<br /><br />

<label for="nom" class="form_col">Nom :</label>
<input type="text" name="nom" id="nom" size="30" /><span class="tooltip">Un nom ne peut pas faire moins de 2 caractères</span>
<br /><br />

<label for="mail" class="form_col">Mail :</label>
<input type="text" name="mail" id="mail" size="30" /><span class="tooltip">Le mail doit etre valide ! Il manque des carractéres.</span>
<br /><br />

<label for="mail_verif" class="form_col">Mail (vérification) :</label>
<input type="text" name="mail_verif" id="mail_verif" size="30" /><span class="tooltip">Le mail ne correspond pas a celui d'origine !</span>
<br /><br />

<label for="date_naissance" class="form_col">Date de naissance :</label>
<input type="text" name="date_naissance" id="date_naissance" size="30" /><span class="tooltip">format JJ/MM/AAAA</span>
<br /><br />

<div class="center"><input type="submit" onclick="afficher()" value="Inscription" /></div>
</form>

<script type="text/javascript">

// Script vérification

function afficher()
{
alert("Merci d'avoir remplie le formulaire. Il serrat soumis a notre système afin de verifier la moindre erreur !")
}
// Fonction de désactivation de l'affichage des "tooltips"

function deactivateTooltips() {

var spans = document.getElementsByTagName('span'),
spansLength = spans.length;

for (var i = 0 ; i < spansLength ; i++) {
if (spans[i].className == 'tooltip') {
spans[i].style.display = 'none';
}
}

}

// La fonction ci-dessous permet de récupérer la "tooltip" qui correspond à notre input

function getTooltip(el) {

while (el = el.nextSibling) {
if (el.className == 'tooltip') {
return el;
}
}

return false;

}

// Fonctions de vérification du formulaire, elles renvoient "true" si tout est ok

var check = {}; // On met toutes nos fonctions dans un objet littéral

// Nom
check['nom'] = function(id) {

var nom = document.getElementById(id),
tooltipStyle = getTooltip(nom).style;

if (nom.value.length >= 3 && nom.value.length < 50) {
nom.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
nom.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

// Comparaison du prénom au nom

check['prenom'] = check['nom'];

//Verification du pseudo

check['pseudo'] = function() {

var login = document.getElementById('pseudo'),
tooltipStyle = getTooltip(login).style;

if ((login.value.length <= 32) && (login.value.length >= 3)){
login.className = 'correct';
tooltipStyle.display = 'none';
return true;
}
else {
login.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

// Verification du mot de passe

check['mdp'] = function() {

var pwd1 = document.getElementById('mdp'),
tooltipStyle = getTooltip(pwd1).style;

if (pwd1.value.length >= 6) {
pwd1.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd1.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

// //

check['mdp_verif'] = function() {

var pwd1 = document.getElementById('mdp'),
pwd2 = document.getElementById('mdp_verif'),
tooltipStyle = getTooltip(pwd2).style;

if (pwd1.value == pwd2.value && pwd2.value != '') {
pwd2.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd2.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

// Vérification du mal
check['mail'] = function() {
var mail = document.getElementById('mail'),
tooltipStyle = getTooltip(mail).style;
mailValue = mail.value;

{
var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');

if(reg.test(mailValue))
{
mail.className = 'correct';
tooltipStyle.display = 'none';
return true;
}
else
{
mail.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
}
};

// //

check['mail_verif'] = function() {

var mail = document.getElementById('mail'),
mail_verif = document.getElementById('mail_verif'),
tooltipStyle = getTooltip(mail_verif).style;

if (mail.value == mail_verif.value && mail_verif.value != '') {
mail_verif.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
mail_verif.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

// Vérification de la date

check['date_naissance'] = function() {
var date = document.getElementById('date_naissance'),
tooltipStyle = getTooltip(date).style;
dateValue = date.value;

{
var reg = new RegExp('^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$');

if(reg.test(dateValue))
{
date.className = 'correct';
tooltipStyle.display = 'none';
return true;
}
else
{
date.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
}
};

// Mise en place des événements

(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.

var myForm = document.getElementById('myForm'),
inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;

for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {

inputs[i].onkeyup = function() {
check[this.id](this.id); // "this" représente l'input actuellement modifié
};

}
}

// Vérification du formulaire

myForm.onsubmit = function() {

var result = true;

for (var i in check) {
result = check[i](i) && result;
}

if (result) {
alert('Le formulaire est bien rempli.');
}

else
{
alert('Le formulaire est mal remplie !');
return false;
}

};

myForm.onreset = function() {

for (var i = 0 ; i < inputsLength ; i++) {
if(inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].className = '';
}
}

deactivateTooltips();

};

})();

// Maintenant que tout est initialisé, on peut désactiver les "tooltips"

deactivateTooltips();

</script>
</body>

Merci a vous, bonne journée !

A voir également:

Javascript redirection astuce
Telecharger javascript - Télécharger - Langages
Astuce whatsapp écriture - Accueil - Messagerie instantanée
Afficher un tableau javascript en html ✓ - Forum Javascript
Astuce démineur expert - Forum Jeux vidéo
Astuce douane contrefaçon - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
20 juil. 2011 à 21:10

Bonjour,

pour empêcher un formulaire d'être soumis il faut que tu ajoute l'attribut "onsubmit" a ton formulaire.

Exemple:

<form name="form" action="" onsubmit="return fonctionDeVerification();">

Adns

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Echelle de fête foraine

java script error in the main process

recherche d'u

javascript:void(0);