[JS] Form validatie -> formulier submit ten alle tijde.

[DoubleJOnline]

Hallo,

Ik probeer een simpele formulier validatie voor elkaar te krijgen. Ik heb al voor elkaar dat ik de 'submit' event aan mijn formulier heb gekoppelt, echter wanneer ik op verzenden klik en ik false retourneer wordt mijn formulier alsnog verzonden.

Als eerste de html opzet zoals ik die nu heb.

code:

    <form method="post" action="index.html" id="contact-form">
    <fieldset>
        <legend>Gegevens</legend>
        
        <dl>
            <dt><label for="naam">Naam:</label>*</dt>
            <dd><input id="naam" class="inputbox" name="naam" type="text" value="" /></dd>
        </dl>
        <dl>
            <dt><label for="email">E-mail:</label>*</dt>
            <dd><input id="email" class="inputbox" name="email" type="text" value="" /></dd>
        </dl>
        <dl>
            <dt><label for="onderwerp">Onderwerp:</label>*</dt>
            <dd><input id="onderwerp" class="inputbox" name="onderwerp" type="text" value="" /></dd>
        </dl>
    </fieldset>

    <fieldset>
        <legend>Bericht</legend>
        <p><textarea id="bericht" class="inputbox" cols="30" rows="10" name="bericht"></textarea></p>
    </fieldset>

    <fieldset>
        <p><input id="submitcontact" name="submitcontact" class="button1" type="submit" value="Verstuur" /> <input id="reset-form" type="reset" class="button1" value="Begin opnieuw" /></p>
    </fieldset>
    </form>

Ik heb een extern javascript aan dit formulier gekoppeld.

code:

/**
* Validate contact form before sending
*/
function validateForm()
{
    window.alert('Functie wordt aangeroepen');
    return false;
}
/**
* initialise form validation
*/
function initContact()
{
    var contactForm = document.getElementById('contact-form');
    if (contactForm)
    {
        if (contactForm.attachEvent)
        {
            contactForm.attachEvent('onsubmit', function() {return validateForm();});
            return;
        }
        if (contactForm.addEventListener)
        {
            contactForm.addEventListener('submit', function() {return validateForm();}, false);
        }
    }
    else
    {
        window.alert('Form does not exist');
    }
}

window.onload = initContact;

Wanneer ik echter in het formulier de volgende code zou plaatsen voor de form tag:

code:

<form method="post" action="index.html" id="contact-form" onsubmit="return validateForm();">

Dan gaat het wel zoals het moet.

De vraag: Hoe komt het dat mijn formulier, na het false retourneren, alsnog verzonden worden.
Ik test dit in: Opera 9.6 en Firefox 3.

[crisp]

Bij het gebruik van eventlisteners moet je expliciet het event cancellen. In het geval van het W3 DOM eventmodel doe je dat met e.preventDefault() (waarbij e het eventobject is dat als argument aan de handler wordt meegegeven). In het geval van het Microsoft eventmodel doe je dat dmv window.event.returnValue = false

Als alternatief kan je natuurlijk ook gewoon dit doen:

JavaScript:

contactForm.onsubmit = validateForm;

Bijkomend voordeel van de laatste manier is dat binnen validateForm() this ook gewoon een referentie is naar je form zelf; iets dat bij het gebruik van het Microsoft eventmodel voor IE niet het geval is.
Enige nadeel is dat je niet meerdere submithandlers kan toekennen, maar meestal is dat ook niet zo.

[ Voor 26% gewijzigd door crisp op 21-03-2009 21:04 ]

[DoubleJOnline]

crisp schreef op zaterdag 21 maart 2009 @ 21:00:
Bij het gebruik van eventlisteners moet je expliciet het event cancellen. In het geval van het W3 DOM eventmodel doe je dat met e.preventDefault() (waarbij e het eventobject is dat als argument aan de handler wordt meegegeven). In het geval van het Microsoft eventmodel doe je dat dmv window.event.returnValue = false

Als alternatief kan je natuurlijk ook gewoon dit doen:

JavaScript:

contactForm.onsubmit = validateForm;

Bijkomend voordeel van de laatste manier is dat binnen validateForm() this ook gewoon een referentie is naar je form zelf; iets dat bij het gebruik van het Microsoft eventmodel voor IE niet het geval is.
Enige nadeel is dat je niet meerdere submithandlers kan toekennen, maar meestal is dat ook niet zo.

Hartelijk dank voor je antwoord. Ik ben met deze gegevens nog eens even verder gaan zoeken heb heb uiteindelijk dit toegepast op mijn validatie functie:

code:

function validateForm(e)
{
    window.alert('Functie wordt aangeroepen');
    e = e || window.event;
    if (e.prefentDefault)
    {
        e.preventDefault();
    }
    else
    {
        e.returnValue = false;
    }
    window.alert("Test de functie");
    return false;
}

[b19a]

Nog een kleine aanvulling/kritiek op de geposte HML. Je definieert voor elk formelement een nieuwe definition list (<dl>). Zoals de naam al doet vermoeden is het een lijst, dus voor elk element behoor je geen nieuwe lijst aan te maken. Zoiets als dit dus:

HTML:

    <fieldset>
        <legend>Gegevens</legend>
        <dl>
            <dt><label for="naam">Naam:</label>*</dt>
            <dd><input id="naam" class="inputbox" name="naam" type="text" value="" /></dd>
            <dt><label for="email">E-mail:</label>*</dt>
            <dd><input id="email" class="inputbox" name="email" type="text" value="" /></dd>
            <dt><label for="onderwerp">Onderwerp:</label>*</dt>
            <dd><input id="onderwerp" class="inputbox" name="onderwerp" type="text" value="" /></dd>
        </dl>
    </fieldset>