Input required is toch niet zo required

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • Allereerst, welkom bij mijn eerste blogpost. Dit is een blog waarin ik schrijf over een project dat ik recentelijk ben begonnen. Ik merkte dat veel mensen in mijn omgeving de tool WRTS niet geschikt vinden om zichzelf te overhoren. WRTS is een tool waar leerlingen online kunnen testen of ze woordjes goed beheersen. Goede alternatieven zijn er niet, en met dank aan @Jesse kwam ik toen op het idee om zelf maar een beter WRTS alternatief te maken. Dit is geen reclameblog of iets in die richting. Ik post hier over problemen waar ik tegenaan loop, zodat jullie deze sneller kunnen oplossen of zelfs vermijden. Tips zijn natuurlijk altijd welkom.

    Ik werk bijna iedere dag wel even aan het project, waarbij ik al vaak tegen een probleem ben aangelopen. Ook vandaag was het weer zo ver. Dit keer had het probleem te maken met een HTML attribuut 'required'. Bij het maken van een woordenlijst is het belangrijk dat deze een naam krijgt. Dit maakt het makkelijker voor andere gebruikers om deze lijst te kunnen vinden, en het ziet er simpelweg beter uit. Daarom besloot ik het inputveld van de titel maar even een required attribuut te geven. Wat het attribuut doet is dat het een gebruiker een form niet laat submitten, zolang niet alle inputvelden met een required attribuut geen waarde hebben. Dit zorgt er dus (in theorie) voor dat een gebruiker op mijn site verplicht wordt om een titel te geven aan zijn woordenlijst. Nou niet dus.

    Nadat de tool steeds meer werd gebruikt en er dus meer woordenlijsten werden gemaakt, bleek dat er veel lijsten geen titel hadden. Ik was erg verbaasd toen me dit gister opviel. Ik had ten slotte het inputveld van de titel een required attribuut gegeven. Volgens w3school is het attribuut ondersteunt in zo goed als alle browsers, behalve Safari. Dit was voor mij al genoeg reden om een andere oplossing te bedenken, gezien Safari gebruikers dus woordenlijsten konden maken zonder titels. Daarnaast heb ik het attribuut getest op een aantal mobieltjes. Hierop werkte deze ook niet. Ik heb het uiteindelijk opgelost met javascript, wat als het goed is wel zou moeten werken op alle devices en in alle browsers. Het script checkt of het inputveld leeg is. Zoniet, dan wordt de form gesubmit.

    Lang verhaal kort: Het required attribuut is een goed idee, maar werkt slecht in de praktijk. Ik raad je aan om het te vervangen met het script dat ik hieronder heb geplaatst.

    JavaScript Source Code

    1. $(document).ready(function() {
    2. $("#save").click(function(){
    3. if($("#map_name").val().length < 1){
    4. alert('Geef je kaart een naam.');
    5. }else{
    6. $("#map_form").submit();
    7. }
    8. });
    9. });
    Stay tuned. Vragen en tips zijn altijd welkom.
    Bekijk mijn portfolio Rocketeerdesign voor voorbeelden van mijn werk. Heb je nog een idee dat je altijd al hebt willen uitwerken in de vorm van een website, applicatie of design? Contacteer me dan.

    Bezig met een nieuw project: Online topografie en woordjes overhoren. Laat weten wat je ervan denkt. :)

    320x gelezen

Reacties 7

  • FangorN -

    Hm. Weet niet hoe dat formulier verder in elkaar zit, maar stel ik zit in het titel-tekstveld en druk daar op enter, dan wordt het formulier gesubmit, maar de bovenstaande click vuurt dan niet? Het lijkt mij beter om te controleren of het formulier gesubmit wordt in plaats van dat er op een button geklikt wordt? En dan kun je ook echt afvangen dat de submit niet doorgaat (return false oid). Daarnaast, als je dan toch bezig bent met jQuery, maak een mooi effectje waarbij het bewuste veld oplicht met daaronder een tekst die uitlegt waarom de invoer niet werd geaccepteerd in plaats van een jaren 90 alert :p.

    En wat @WHMCSAddons zegt: ook altijd serverside controleren :].

    • P.Yntema -

      Dat laatste is een goed idee, de alert is waarschijnlijk een beetje saai zo. Het formulier zit inderdaad anders in elkaar, er moet echt op die knop gedrukt worden.

    • FangorN -

      Maar wat je uiteindelijk wilt afvangen is toch een daadwerkelijke submit? Of post je alles via een AJAX-call ofzo?

    • P.Yntema -

      Ik wil inderdaad een submit stoppen als niet alles is ingevuld.

  • WHMCSAddons -

    Heeft ook geen effect als je javascript uitschakelt, altijd server-side extra controle uitvoeren.

    • P.Yntema -

      Uiteraard, maar het is altijd fijn om het op de client ook te doen. Ik controleer ook op de server-side.

    • ThomasBlom -

      Inderdaad, altijd server-side controleren. Client-side is alleen voor de gebruiksvriendelijkheid.