Ce petit Tutorial vous explique comment utiliser les langages XHTML, CSS, jQuery et un peu de PHP pour faire un formulaire de contact de type « pop up » qui recouvrira votre page lorsque vous cliquerez sur un lien hypertext. Le formulaire valide tout ce qui est entré dans le formulaire, ensuite Ajax se charge d’envoyer le formulaire sans rafraichir la page.
On connait tous les animations de type Flash, elles sont facilement réalisables à l’aide de logiciels mais hélas le Flash n’est pas vraiment apprécié des webmasters pour des raisons de référencement principalement. Mais alors comment créer des animations sans le [...]
Si vous êtes webmaster et que vous aimeriez empêcher vos visiteurs d’effectuer des clics droits (souvent pour ne pas que l’on vienne piquer les images), voici un petit code Javascript que j’utilises sur certains sites web de type Portfolio ou [...]
Aujourd’hui j’ai décidé de me pencher sur un petit soucis de construction du blog. A savoir l’empilement de certains éléments sur des pages (les articles et les photos). Le problème était simple aux premiers abords, lorsque l’on ouvrait une vidéo comme l’une de celles [...]
une erreur dans le code : Invalid username entered!
Bonjour d’abord Merci !
Mais bon j’ai passé 4 heures à essayer de débugger le problème de : Invalid username entered!
Et je n’ai pas réussi donc si tu as une soluce !! Plz Give !!!
Bon javascript corrigé par un ami par contre pour la partie transfert entre le javascript et le php! Mystère !!!
Je ne reçois jamais le mail !!
le .js corrigé :
$(function() {
// load the modal window
$(‘a.modal’).click(function(){
// scroll to top
$(‘html, body’).animate({scrollTop:0}, ‘fast’);
// before showing the modal window, reset the form incase of previous use.
$(‘.success, .error’).hide();
$(‘form#contactForm’).show();
// Reset all the default values in the form fields
$(‘#name’).val(‘Votre nom et prénom’);
$(‘#email’).val(‘Votre adresse mail’);
$(‘#comment’).val(‘Votre demande/message…’);
$(‘#ville’).val(‘Votre ville’);
$(‘#telephone’).val(‘Votre numéro’);
//show the mask and contact divs
$(‘#mask’).show().fadeTo( », 0.7);
$(‘div#contact’).fadeIn();
// stop the modal link from doing its default action
return false;
});
// close the modal window is close div or mask div are clicked.
$(‘div#close, div#mask’).click(function() {
$(‘div#contact, div#mask’).stop().fadeOut(‘slow’);
});
$(‘#contactForm input’).focus(function() {
// $(this).val(‘ ‘); <– celui là, il était traitre !
$(this).val('');
});
$('#contactForm textarea').focus(function() {
$(this).val('');
});
// when the Submit button is clicked…
$('input#submit').click(function() {
$('.error').hide().remove();
//Inputed Strings
var username = $('#name').val();
var email = $('#email').val();
var ville = $('#ville').val();
var telephone = $('#telephone').val();
var comment = $('#comment').val();
//Error Count
// var error_count;
var error_count = 0;
//Regex Strings
// var username_regex = /^[a-z0-9_-]{3,16}$/, //Original
var username_regex = new RegExp('^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$','i'); // une erreur ici : la ligne était finie par une virgule, au lieu d'un point virgule… J'ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom & Prénom, 16 caractères, ça peut être trop court…
// email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original
var email_regex = new RegExp('^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$', 'i'); //Original
//Test Username
if(!username_regex.test(username)) {
$('#contact_header').after('Nom invalide !’ + username);
error_count += 1;
}
//Test Email
if(!email_regex.test(email)) {
$(‘#contact_header’).after(‘Erreur de mail !’ + email);
error_count += 1;
}
//Blank Comment?
if(comment == ») {
$(‘#contact_header’).after(‘Aucun commentaire écris !’);
error_count += 1;
}
//No Errors?
if(error_count === 0) {
$.ajax({
type: « post »,
url: « send.php »,
// data: « $name= » + name + « &email= » + email + « $ville » + ville + « $telephone » + telephone + « &comment= » + comment, //ORIGINAL
data: « name= » + name + « &email= » + email + « &ville= » + ville + « &telephone= » + telephone + « &comment= » + comment,
error: function(return_val) {
//DEVMODE alert(‘error : ‘+return_val);
$(‘.error’).hide();
$(‘#sendError’).slideDown(‘slow’);
},
success: function (return_val) {
//DEVMODE alert(‘success : ‘+return_val);
$(‘.error’).hide();
$(‘.success’).slideDown(‘slow’);
$(‘form#contactForm’).fadeOut(‘slow’);
}
});
}
else {
$(‘.error’).show();
}
return false;
});
});
Plz de l’aide !!!
je reviens sur les modifs :
php corrigé :
<?php
header("Content-Type: text/plain; charset=UTF-8");//
et javascript corrigé :
$(function() {
// load the modal window
$(‘a.modal’).click(function(){
// scroll to top
$(‘html, body’).animate({scrollTop:0}, ‘fast’);
// before showing the modal window, reset the form incase of previous use.
$(‘.success, .error’).hide();
$(‘form#contactForm’).show();
// Reset all the default values in the form fields
$(‘#name’).val(‘Votre nom et prénom’);
$(‘#email’).val(‘Votre adresse mail’);
$(‘#comment’).val(‘Votre demande/message…’);
$(‘#ville’).val(‘Votre ville’);
$(‘#telephone’).val(‘Votre numéro’);
//show the mask and contact divs
$(‘#mask’).show().fadeTo( », 0.7);
$(‘div#contact’).fadeIn();
// stop the modal link from doing its default action
return false;
});
// close the modal window is close div or mask div are clicked.
$(‘div#close, div#mask’).click(function() {
$(‘div#contact, div#mask’).stop().fadeOut(‘slow’);
});
$(‘#contactForm input’).focus(function() {
// $(this).val(‘ ‘); <– celui là, il était traitre !
$(this).val('');
});
$('#contactForm textarea').focus(function() {
$(this).val('');
});
// when the Submit button is clicked…
$('input#submit').click(function() {
$('.error').hide().remove();
//Inputed Strings
var username = $('#name').val();
var email = $('#email').val();
var ville = $('#ville').val();
var telephone = $('#telephone').val();
var comment = $('#comment').val();
//Error Count
// var error_count;
var error_count = 0;
//Regex Strings
// var username_regex = /^[a-z0-9_-]{3,16}$/, //Original
var username_regex = new RegExp('^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$','i'); // une erreur ici : la ligne était finie par une virgule, au lieu d'un point virgule… J'ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom & Prénom, 16 caractères, ça peut être trop court…
// email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original
var email_regex = new RegExp('^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$', 'i'); //Original
//Test Username
if(!username_regex.test(username)) {
$('#contact_header').after('Nom invalide !’);
error_count += 1;
}
//Test Email
if(!email_regex.test(email)) {
$(‘#contact_header’).after(‘Erreur de mail !’);
error_count += 1;
}
//Blank Comment?
if(comment == ») {
$(‘#contact_header’).after(‘Aucun commentaire écris !’);
error_count += 1;
}
//No Errors?
if(error_count === 0) {
$.ajax({
type: « post »,
url: « send.php »,
// data: « $name= » + name + « &email= » + email + « $ville » + ville + « $telephone » + telephone + « &comment= » + comment, //ORIGINAL
data: « name= » + username + « &email= » + email + « &ville= » + ville + « &telephone= » + telephone + « &comment= » + comment,
error: function(return_val) { // Si l’envoi au script PHP foire : return_val = le contenu d’une page introuvable, ex : 404 etc. (ça dépendra de la config du serveur)
//DEVMODE alert(‘error : ‘+return_val);
// $(‘.error’).hide();
$(‘#contact_header’).after(« Module d’envoi introuvable. »);
$(‘.error’).show();
$(‘#sendError’).slideDown(‘slow’);
},
success: function (return_val) { // return_val = sent | empty | trigger_error de la fonction mail()
//DEVMODE alert(‘success : ‘+return_val);
if(return_val == ‘sent’){
$(‘.error’).hide();
$(‘.success’).slideDown(‘slow’);
$(‘form#contactForm’).fadeOut(‘slow’);
}else if(return_val == ‘empty’){ //L’un des champs, traité par PHP est NULL, l’envoi a donc été validé par JS, mais bloqué par PHP
$(‘#contact_header’).after(« Le formulaire est incomplet. »);
$(‘.error’).show();
$(‘#sendError’).slideDown(‘slow’);
}
else{ // La fonction mail() de PHP a retourné une erreur.
$(‘#contact_header’).after(« Le site est actuellement dans l’impossibilité technique d’envoyer des messages. »); // Version officielle
// $(‘#contact_header’).after(« »+return_val+ »"); // Version DEVMODE (déboggage)
$(‘.error’).show();
$(‘#sendError’).slideDown(‘slow’);
}
}
});
}
else {
$(‘.error’).show();
}
return false;
});
});
Php corrigé pardon ^^ :
<?php
header("Content-Type: text/plain; charset=UTF-8");//
bon ben veux pas de php !!!
Salut Romain, désolé que le script ne fonctionne pas, je tâcherai d’en trouver un meilleur pour remplacer celui-ci