Abonneren op: RSS

CSS3 is what i do, and you should do!

Gigadesign


jQuery foutmeldingen afhandelen

In: HTML5, jQuery, Usability

Formulieren en foutmeldingen

Als gebruiker is het altijd handig (en een goede user-experience) om, bij verkeerde of foutieve invoer, foutmeldingen te krijgen bij het invullen van een formulier.

Waarom zijn foutmeldingen belangrijk?

Veel websites tonen geen foutmeldingen van hun online formulieren. Dat kost bezoekers. Het gaat immers om bezoekers die met u willen communiceren of zelfs klant willen worden.

En dat moet niet veel extra moeite te kosten

Nemen we nu dit boorbeeld dat ik onlangs maakte:

1
2
3
4
5
6
7
<div class="control-group">
 <form id="search" name="search" action="" method="post">
  <input type="text" id="search-zip" placeholder="Jouw postcode">
  <input type="submit" id="search-submit" value="">
 </form>
 <p class="warning hidden">Deze postcode bestaat niet</p>
</div>

input-normal

Bij het niet invullen, of een verkeerde Belgische postcode verschijnt dit:

input-error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
 $("#search").on('submit', validate);
});
validate = function(event) {
event.preventDefault();
event.stopPropagation();
var zip = $("#search-zip").val();
validateZip(zip,
function() {
window.location.href = "/cities/zip/"+zip;
}, function() {
$('.control-group').addClass('error');
setTimeout(function() {$('.control-group').removeClass('error');},2200);
})}

De handigheid hierin, naar mijn mening, is dat de foutboodschap heel duidelijk zegt wat er fout is, en ook na 2,2 seconden weer verdwijnt, wat mij uiteraard extra JavaScript uitspaart daar ik niet moet gaan checken of er al dan niet focus is op het veld waar een fout gebeurde om dan de foutboodschap weer te verbergen.

Live demo?

www.plukjegeluk.be

Ook een reactie geven!!

Je email is nodig en zal nooit worden weer- of doorgegeven.