Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JavaScript] - meerdere formulier veld controles

Anoniem
Johant
4 antwoorden
  • Ik heb een webformulier met 10 Input-Text velden.
    Deze mogen alleen een numerieke waarde bevatten.

    Daar heb ik de volgende code voor bedacht:

    [code:1:32e6a3cc15]</script>

    <script type="text/javascript">
    function validate01()
    {
    txt = document.forms[0].veld01.value
    if (txt>=1 && txt<=999)
    {
    return true
    }
    else
    {
    document.forms[0].veld01.value = ""
    alert("Je kunt alleen getallen tussen 0 en 1.000 invullen")
    return false
    }
    }
    </script>[/code:1:32e6a3cc15]

    Deze werkt prima, maar ik heb 10 velden: veld01 t/m veld10
    Moet ik 10 keer een verschillende validate functie maken of is er een nettere oplossing?
  • Natuurlijk is er een nettere methode. Als je kijkt naar hoe het javascript model is opgebouwd zie je dat alle objecten in de pagina worden 'opgeslagen' in collecties. Bijvoorbeeld alle forms op een pagina (document.forms) en ook alle elementen van een form (document.forms[index].elements). En met een for loop kan je door zo'n collectie wandelen.

    De meest simpele methode kan bijvoorbeeld iets zijn als:
    [code:1:d101c26b78]
    function validate01()
    {
    var s;
    for (var i = 0; i <= 10; i++)
    {
    // evt. een nul ervoor plakken bij getallen onder de 10
    s = (i < 10) ? "0" + i : i;
    if (document.forms["formnaam"].elements["veld" + s].value > 1)
    {
    // enz. enz.
    }
    }
    }
    [/code:1:d101c26b78]

    Maar mooier vind ik het om het geheel wat dynamischer te houden, bijv:
    [code:1:d101c26b78]
    function validate01(mFormIndex)
    {
    var bCorrectValues = true;
    var oFormElements = document.forms[mFormIndex].elements;
    for (var i=0; i < oFormElements.length; i++)
    {
    // controleer of het een text input is
    // en de naam voldoet aan de regel "veldXX",
    if (oFormElements[i].type == 'text' && /^veld\d+$/.test(oFormElements[i].name))
    {
    if (oFormElements[i].value < 1 || oFormElements[i].value > 999)
    {
    bCorrectValues = false;
    oFormElements[i].value = '';
    }
    }
    }

    if (bCorrectValues)
    {
    return true;
    }
    else
    {
    alert("Je kunt alleen getallen tussen 0 en 1.000 invullen");
    return false;
    }
    }
    [/code:1:d101c26b78]
    De check op de naam kan je ook met indexOf() doen (
  • Thanx voor de uitgebreide uitleg, ik print 'm uit om eens goed te bestuderen.

    Ik heb "1a" gecontroleerd, maar die wordt netjes afgevangen.
  • [quote:5f0f701fc0="Johant"]
    Ik heb "1a" gecontroleerd, maar die wordt netjes afgevangen.[/quote:5f0f701fc0]
    Vreemd, 1a wordt hier gecast naar een integer (1) en voldoet dus aan de regel (1-999) terwijl je zou mogen verwachten dat 1a hier niet aan voldoet (imho).

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.