[Javascript] Checkbox validation

[EMWEEE]

Beste Tweakers,

Op het moment ben ik bezig met het opzetten van een Capitve Portal op een Pfsense box. Op deze captive portal dienen gebruikers in te loggen met een eerder verstrekte account.
Nu heb ik op de captive portal ook een user agreement geplaatst en wilde een checkbox plaatsen welke gebruikers dienen aan te vinken.

Ik ben totaal niet thuis is deze meuk en na heel wat gezocht te hebben op internet zonder resultaat vraag ik jullie maar op hulp.

Hieronder de code wat ik tot zo ver heb. Op dit moment wordt de checkbox compleet genegeerd.

code:

<script type="text/javascript">
      function CheckBoxesValidations()
      {
         if(document.getElementById('checkbox').checked == false)
         {
            alert("Please read and accept the User agreement to proceed!");
            return false;
         }
         else
            return true;
      }
     </script>

<form method="post" action="$PORTAL_ACTION$">
            <a_white>Gebruikersnaam</a_white>
                <input name="auth_user" type="text" style="width:145px"><br/>
                <a_white>Wachtwoord</a_white>
                <input name="auth_pass" type="password" style="width:145px"><br/>
                <input id="checkbox" type="checkbox"/><a>ACCEPT</a>
                <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
                <input name="accept" type="submit" value="Continue">
                </form>

[Copyman]

Je moet de functie natuurlijk nog wel aan het submit event van het formulier hangen.

Zou simpelweg zo kunnen:

HTML:

<form method="post" action="foo.php" onsubmit="return CheckBoxesValidations();">

Of met onsubmit (vergeet niet je formulier een ID te geven):

JavaScript:

document.getElementById('login-form').onsubmit = CheckBoxesValidations;

Of met onsubmit (anonymous function):

JavaScript:

document.getElementById('login-form').onsubmit = function() {
    if(!document.getElementById('checkbox').checked) {
        alert('Please read and accept the user agreement to proceed!');
        return false;
    }
}

Of lees je eens in over addEventListener, 2, 3

offtopic:
Enne, doe eens <label> gebruiken.

Vergeet ik daar toch bijna het required attribute. Afhankelijk van je browser support zou je die ook nog kunnen gebruiken.

[ Voor 12% gewijzigd door Copyman op 25-02-2012 19:39 ]

[EMWEEE]

Bedankt Copyman.

Het submit event erbij gedaan en werkt nu zoals het hoort.