11485 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
au risque d'avoir l'air ridicule je poste tout de même mon problème. A force d'avoir le nez dedans je ne vois plus la solution qui doit être simple sur mon script PHP.
Voici le problème :
Lorsqu’on valide l’envoi du formulaire sans avoir fait d'erreur, une image de félicitations apparait (j'ai préféré pour une question de graphisme) en faisant disparaitre le formulaire.
J'ai mis en place le même système pour un message d'erreur, l'image s’affiche au dessus du formulaire et du coup la mise en page se décale et l’on se retrouve avec un ascenseur (dans la pratique c’est normal pour que l’internaute recommence son envoi) mais dans ce cas ça m’arrange pas au niveau graphique, je préfèrerai que le message d’erreur s’affiche mais fasse disparaitre le formulaire comme pour l'envoi sans erreur.

Si quelqu'un a une solution, merci d'avance; voici le code de ma page formulaire :

<?php
/* On s'occupe en 1er du traitement PHP */
$success = '0';
$error = '';
if(isset($_POST))
{
  if(isset($_POST['email']))
  {
    $email = trim($_POST['email']);
    if(empty($email))
    {
      $error = 'emptymail';
    }
	elseif(!check_email_address($email))
    {
      $error = 'incorrectemail';  
    }
    else
    {
      $sujet = "Inscription";
      $message = "Adresse email : ".$_POST['email']."\r\n";
      $message = "Message automatique confirmant l'inscription par le formulaire du site  www.caue06.fr  de l'adresse ci-dessus. " .trim(nl2br($_POST['message']))."\r\n";
      $entete = 'From: '.$email."\r\n".
            'Reply-To: '.$email."\r\n".
      'X-Mailer: PHP/'.phpversion();
      if (mail($email,$sujet,$message,$entete))
      {
        $success = 1;
      } else 
      {
        $error = 'emptymail';
      } 
    }
  }
}
else
{ 
  /* si le visiteur vient direcetement sur cette page, il est redirigé vers le formulaire */
  header('location:../inscription.html');
  exit;
}

/* Ici les fonctions dont j'ai besoin pour le traitement PHP */

/*
 * check_email_address($email) renvois true ou false si l'adresse email est valide ou pas.
 */
  
function check_email_address($email) 
{
    // First, we check that there's one @ symbol, and that the lengths are right
    if (!preg_match("/^[^@]{1,64}@[^@]{1,255}$/", $email)) 
    {
        // Email invalid because wrong number of characters in one section, or wrong number of @ symbols.
        return false;
    }
    // Split it into sections to make life easier
    $email_array = explode("@", $email);
    $local_array = explode(".", $email_array[0]);
    for ($i = 0; $i < sizeof($local_array); $i++) {
        if (!preg_match("/^(([A-Za-z0-9!#$%&'*+\/=?^_`{|}~-][A-Za-z0-9!#$%&'*+\/=?^_`{|}~\.-]{0,63})|(\"[^(\\|\")]{0,62}\"))$/", $local_array[$i]))
        {
            return false;
        }
    }
    if (!preg_match("/^\[?[0-9\.]+\]?$/", $email_array[1])) 
    { // Check if domain is IP. If not, it should be valid domain name
        $domain_array = explode(".", $email_array[1]);
        if (sizeof($domain_array) < 2) {
            return false; // Not enough parts to domain
        }
        for ($i = 0; $i < sizeof($domain_array); $i++) {
            if (!preg_match("/^(([A-Za-z0-9][A-Za-z0-9-]{0,61}[A-Za-z0-9])|([A-Za-z0-9]+))$/", $domain_array[$i]))
            {
                return false;
            }
        }
    }
    return true;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>inscription</title>
<link href="css/texte.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {  
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}
</style>
</head>

<body leftmargin="0" topmargin="0">

<?php if($success == '1') : ?>
  <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_01.png" alt="" />
<?php else : ?>  
  <?php if($error == "emptymail") : ?>
  <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_02.png" alt="" />
  <?php elseif($error == "incorrectemail") : ?>
 <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_03.png" alt="" />
  <?php elseif($error == "emailfailed") : ?>
 <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_03.png" alt="" />
  <?php endif; ?>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" style="background-image:url(../php/images/imginscription_00.png); background-repeat: no-repeat; ">
  <table width="371" height="145" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="371" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="371" height="57" valign="top">
      <table width="371" height="57" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="292" valign="top">
   &nbsp;&nbsp;&nbsp;&nbsp; <input id="email" name="email" type="text" placeholder="Indiquez votre Email" size="36px" style="position:absolute"/></td>
      <td width="80" height="57">
      <input type="image"  onclick="submit"  src="../php/images/btinscription_a.png"></button></td>
    </tr>
  </table>
  </td>
    </tr>
  </table>
</form>
<?php endif; ?>

    
    </body>
</html>
Salut,
Je pense que ce n'est pas une très bonne idée. L'ergonomie doit primer sur le coter graphique.
Faire disparaître le formulaire en cas d'erreur est une assurance que l'internaute ne se s’embête pas à recharger la page pour pouvoir réécrire son message.
De plus tu n'est pas dans la bonne section car ton problème ne concerne pas le javascript mais du php.
Cela étant dit, si tu ne veux pas que le formulaire s'affiche en cas d'erreur, je pense qu'il te suffit de rajouter un else if :

<?php if($success == '1') {?>
  <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_01.png" alt="" />
<?php }else if($error == "emptymail"){ ?>
  <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_02.png" alt="" />
  <?php }elseif($error == "incorrectemail") {?>
 <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_03.png" alt="" />
  <?php }elseif($error == "emailfailed"){ ?>
 <img src="http://www.aphotomed.com/caue06-2014/php/images/imginscription_03.png" alt="" />
  <?php }else{ ?>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" style="background-image:url(../php/images/imginscription_00.png); background-repeat: no-repeat; ">
  <table width="371" height="145" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="371" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="371" height="57" valign="top">
      <table width="371" height="57" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="292" valign="top">
   &nbsp;&nbsp;&nbsp;&nbsp; <input id="email" name="email" type="text" placeholder="Indiquez votre Email" size="36px" style="position:absolute"/></td>
      <td width="80" height="57">
      <input type="image"  onclick="submit"  src="../php/images/btinscription_a.png"></button></td>
    </tr>
  </table>
  </td>
    </tr>
  </table>
</form>
<?php } ?>


As tu penser à une validation javascript, une meilleur solution que ce que tu proposes et qui pourrait correspondre à tes critères graphiques.

Bonne journée.

edit : Il faut une validation php dans tous les cas => si javascript est désactiver. Tu devrais regarder les validations javascript et utiliser le css3 :
http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html
http://www.grafikart.fr/tutoriels/html-css/form-validation-css3-html5-268
Et pour le javascript :
http://openweb.eu.org/articles/validation_formulaire
Modifié par renard13 (23 Sep 2014 - 13:29)