Bonjour à tous
Aujourd'hui, je viens vous voir pour une petite question qui me taraude.
Je me suis basée sur ce tutoriel pour faire un formulaire de contact. J'ai amélioré un peu le tout à ma sauce, avec une regex pour vérifier l'email.
Dans le tutoriel en question, l'auteur met les messages de champ non rempli directement dans le html ce qui donne :
Puis les cache en javascript (jquery mais c'est pareil dans l'absolu), pour les ré-afficher si le champ n'est pas rempli, une fois que l'utilisateur a cliqué sur submit (à l'aide d'ajax).
Dans mon formulaire, pour l'email par exemple j'ai ma regex qui va vérifier tout ça, du coup j'ai deux cas. Mon idée a été de laisser le label pour l'erreur vide, et d'afficher le message d'erreur avec javascript, ce qui nous donne :
Et le jquery qui va avec :
Du coup, ma question : d'un point de vue de l'accessibilité, vaut-il mieux laisser le message d'erreur dans le html, comme fait dans le formulaire, ou le mettre dans le javascript et laisser un label vide (sémantiquement pas génial)? De plus, pour les screenreaders, je me demande un peu ce que mon label vide va donner.
Enfin, autre petit "souci", le formulaire utilise de l'ajax pour être envoyé, ce qui veut dire que si le javascript est désactivé, plus de formulaire. Est- ce que vous avez des "techniques" ou des conseils pour parer à ça ? Mon idée était, de mettre dans une balise noscript une autre balise form, qui renvoie le formulaire à un traitement 100% php coté serveur, du style :
Mais celà ne semble pas fonctionner
Merci d'avance
Modifié par InpIxelItrust (18 Oct 2010 - 17:27)
Aujourd'hui, je viens vous voir pour une petite question qui me taraude.
Je me suis basée sur ce tutoriel pour faire un formulaire de contact. J'ai amélioré un peu le tout à ma sauce, avec une regex pour vérifier l'email.
Dans le tutoriel en question, l'auteur met les messages de champ non rempli directement dans le html ce qui donne :
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
Puis les cache en javascript (jquery mais c'est pareil dans l'absolu), pour les ré-afficher si le champ n'est pas rempli, une fois que l'utilisateur a cliqué sur submit (à l'aide d'ajax).
Dans mon formulaire, pour l'email par exemple j'ai ma regex qui va vérifier tout ça, du coup j'ai deux cas. Mon idée a été de laisser le label pour l'erreur vide, et d'afficher le message d'erreur avec javascript, ce qui nous donne :
<label for="user_email">E-mail<span class="redstar">*</span> :</label>
<input class="" type="text" name="user_email" id="user_email" value="" />
<label class="error" for="user_email" id="user_email_error"> </label>Et le jquery qui va avec :
//validate email
function emailValidator(emailAddress) {
var pattern = new RegExp(/^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/i);
return pattern.test(emailAddress);
}
var user_email = $("input#user_email").val();
if (user_email == "") {
$("label#user_email_error").html('This field is required.');
$("label#user_email_error").show();
$("input#user_email").focus();
return false;
}
else{
if (!emailValidator(user_email))
{
$("label#user_email_error").html('Please enter a valid email');
$("label#user_email_error").show();
$("input#user_email").focus();
return false;
}
}
Du coup, ma question : d'un point de vue de l'accessibilité, vaut-il mieux laisser le message d'erreur dans le html, comme fait dans le formulaire, ou le mettre dans le javascript et laisser un label vide (sémantiquement pas génial)? De plus, pour les screenreaders, je me demande un peu ce que mon label vide va donner.
Enfin, autre petit "souci", le formulaire utilise de l'ajax pour être envoyé, ce qui veut dire que si le javascript est désactivé, plus de formulaire. Est- ce que vous avez des "techniques" ou des conseils pour parer à ça ? Mon idée était, de mettre dans une balise noscript une autre balise form, qui renvoie le formulaire à un traitement 100% php coté serveur, du style :
<form action="" id="formAddResult" class="form_64" method="post">
<noscript> <form action="traitementsansajax.php" id="formAddResult" class="form_64" method="post"> </noscript>
Mais celà ne semble pas fonctionner
Merci d'avance
Modifié par InpIxelItrust (18 Oct 2010 - 17:27)
