[JavaScript] checken of er een text field is ingevuld

[Verwijderd]

Ik bouw een webshop met servlets en wil checken of er iets is ingevuld op het formulier. Ik ben absoluut geen JavaScript expert en loop al een tijdje te klooien met dat formulier. Ik vind voorbeelden waar wordt gecheckt of er een specifiek veld is ingevuld. In mijn geval wil ik weten of er iets is ingevuld en zo ja dan mag het form gesubmit worden. Kan iemand mij vertellen wat hier niet goed is?? thanks

code:

<script language="javascript">
<!--



function checkit()
{
    

    int count=0;    
    for (i=0;i<4;i++)
    {
        box = document.forms[0].elements[i];
        if (!box.value)
        {
            count++;

        }
        //textstring += box.name + ': ' + box.value + '\n';
    }
    
    if(count==0)
    {   
        alert('geen data ingevoerd');
        box.focus();
        return;
    }
    

    }
// -->
</SCRIPT>

[André]

Je kun beter per formulier alle textboxen opvragen met getElementsByTagName en die doorlopen ipv element 0 t/m 3. Verder is dit een kwestie van een beetje debuggen, wat lukt er niet precies? Een beetje eigen moeite is wel vereist.

[crisp]

Ook niet onbelangrijk: waar en hoe roep je de functie aan?

[Verwijderd]

dicht gooien maar, ik heb met heel weinig denkwerk het probleem kunnen oplossen. Hij was niet blij met:

int count

[André]

Nou lekker dan, in het vervolg eerst wat intensiever debuggen dan maar...

[crisp]

Voor het archief nog even een nette methode:

HTML:

<form action="foo.php" method="POST" onsubmit="return checkit(this)">
    <fieldset>
        <legend>Invul formulier ding</legend>
        <label for="input1">Input 1: </label><input type="text" name="input1" id="input1">
        <label for="input2">Input 2: </label><input type="text" name="input2" id="input2">
        <label for="input3">Input 3: </label><input type="text" name="input3" id="input3">
        <label for="input4">Input 4: </label><input type="text" name="input4" id="input4">
        <input type="submit" value="submit">
    </fieldset>
</form>

JavaScript:

function checkit(form)
{
    var i = 0, el;

    while ((el = form.elements[i++]))
    {
        if (el.tagName.toLowerCase() == 'input' && el.type == 'text' && /^\s*$/.test(el.value))
            break;

        //-- eventueel afhandeling van andere elementen/types
    }

    if (el)
    {
        //-- error, cancel submit
        el.style.backgroundColor = 'red';
        alert('Input \'' + el.name + '\' niet ingevuld');
        el.focus();
        return false;
    }

    //-- submit
    return true;
}

uit te breiden naar wens; het gaat voornamelijk om de manier waarop de functie wordt aangeroepen (vanuit de onsubmit handler), een referentie naar het formulier meegeeft aan de functie wat lookups overbodig maakt, en de returnvalue waarmee je de default submit actie kan cancellen

En last but not least: gebruik geen (!element.value) om te kijken of er niets is ingevuld; stel dat iemand '0' heeft ingevuld en dat dat een geldige waarde is, of andersom: iemand vult enkel een spatie in. Een reguliere expressie is in dat geval een stuk handiger

[ Voor 12% gewijzigd door crisp op 04-05-2006 22:07 ]