Checkbox verplicht maken

[Svennos86]

Ik hoop dat ik dit op de goede plek post, maar ik zit met een klein debakel en heb me helemaal suf ge-googled... zonder resultaat

ik heb een formulier waarin ik een veld verplicht heb gemaakt om in te vullen:

stukje JS daarvoor:

code:

<script language="JavaScript">
function formulierTest(formulierVeld){
//Geef hier de naam in van de verplichte velden, zoals in je formulier:
var verplichtVeld = Array("aantal");
//Geef hier de naam in die moet verschijnen in het alert-venster:
var veldBeschrijving = Array("Totaal aantal personen");
//Geef hier het bericht in:
var alertBoodschap = "Gelieve het volgende in te vullen:\n";
    
//Hieronder niets wijzigen:
var Boodschap = alertBoodschap.length;
for (var i = 0; i < verplichtVeld.length; i++){var obj = formulierVeld.elements[verplichtVeld[i]];if (obj){switch(obj.type){case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){alertBoodschap += "-" + veldBeschrijving[i] + "\n";}break;case "select-multiple":
if (obj.selectedIndex == -1){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}break;
case "text":case "textarea":if (obj.value == "" || obj.value == null){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}break;default:
if (obj.value == "" || obj.value == null){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}}}}
if (alertBoodschap.length == Boodschap){return true;}else{alert(alertBoodschap);return false;}}

</script>

dat maakt dus een veld verplicht in te vullen voor het aantal personen wat zich via dit formulier inschrijft. nu zou ik alleen nog willen dat de checkbox die ook in het formulier staat, ook verplicht wordt.

dus hierbij de vraag.... HOE?

[siddler]

Bedoel je dat dit vinkje verplicht aangevinkt moet worden (zoals, ik heb de algemene voorwaarden gelezen), of dat er verplicht een van bijv 3 checkboxes een kruisje moet hebben?
In het eerste geval lijkt me dat je het gewoon met een simpel if statement kunt doen, niet?

[ Voor 12% gewijzigd door siddler op 01-03-2009 16:25 ]

[Svennos86]

nee er staat dus 1 checkbox in t formulier (om akkoord te gaan emt een regelement) dat dus verplicht moet worden om t formulier te kunnen zenden....

ik heb wel al dit geprobeerd:

code:

if(document.naamvanjeform.naamvanjecheckbox.checked == false)
{
 alert('Je foutmelding');
 return false;
}

maar dat deed niks.... vergeet ik daar dan nog wat in misschien?

[TERW_DAN]

Bij een checkbox kun je checken of het ding aangevinkt is of niet door te kijken naar .checked van het element (dus element.checked). Deze returned een true of false. Schijf een checkje dat kijkt wat het ding retourneert en je bent er.

[edit]
ah, dat had je dus al

Maar je moet die check wel in de al bestaande checks erbij zetten. Niet nadat de for loop al een return true heeft gedaan.

[ Voor 25% gewijzigd door TERW_DAN op 01-03-2009 16:30 ]

[Svennos86]

uhhh ja sorry maar ik ben wel een beetje een leek met JS. Het bestaande script komt ook maar van google dusja...

is dit eenvoudig uit te leggen

[chem]

Zijn 2 radio buttons (ja/nee) niet duidelijker voor de gebruiker en werkbaar zonder javascript?

[Voutloos]

Terw_Dan schreef op zondag 01 maart 2009 @ 16:29:
Maar je moet die check wel in de al bestaande checks erbij zetten. Niet nadat de for loop al een return true heeft gedaan.

En voordat je dat doet, mag je eerst de javascript leesbaar maken. Een paar newlines en wat indenting kan absoluut geen kwaad in deze.

En javascript is nooit een volledige form validatie oplossing. Al deze checks moeten ook server side afgedwongen worden.

[TERW_DAN]

Tja, je moet wel snappen wat je script doet, anders ga je er niet uitkomen.

In principe zou dit moeten werken als je na regel 16 het volgende set

JavaScript:

if (obj.checked == false && obj.type == 'checkbox'){
alertBoodschap += " - " + veldBeschrijving[i] + "\n";
}

chem schreef op zondag 01 maart 2009 @ 16:33:
Zijn 2 radio buttons (ja/nee) niet duidelijker voor de gebruiker en werkbaar zonder javascript?

Imho is dat voor een 'ik ga akkoord met deze voorwaarden' geen nette oplossing, maar volstaat een checkbox (ik heb het althans nog nergens anders gezien als het ging om een verplicht vinkje dat je voor voorwaaden moest zetten).

[ Voor 43% gewijzigd door TERW_DAN op 01-03-2009 16:38 ]

[Svennos86]

Ja ok, maar voor mij is t allang best dat er gewoon een melding komt voor de gebruiker dat ze akkoord gaan met een regelement... hetzij via 1 checkbox of via 2 radio's dus als iemand iets weet.... you're welcome!

-edit....
ik was iets te vroeg sorry!

ik ga t ff uitproberen...

[ Voor 14% gewijzigd door Svennos86 op 01-03-2009 16:38 ]

[SinergyX]

Laat je dit stukje wel uitvoeren als ze op submit drukken?

Daarbij, zoals voutloos zegt, zou ik dit ook serverside controleren, via PHP bijvoorbeeld zijn hier tientallen standaard scripts voor te vinden (ook varianten die zelfs form-items voor je aanmaken).

[Svennos86]

Het is bijna gelukt!

in t waarschuwingsvenster komt te staan:

Gelieve de volgende velden in te vullen:
-Totaal aantal personen
-undefined


maar nu moet ik die undefined nog ff op zien te lossen....

ik heb t nu zo staan:

code:

<script language="JavaScript">
function formulierTest(formulierVeld){
//Geef hier de naam in van de verplichte velden, zoals in je formulier:
var verplichtVeld = Array("aantal", "akkoord");
//Geef hier de naam in die moet verschijnen in het alert-venster:
var veldBeschrijving = Array("Totaal aantal personen", "akkoord");
//Geef hier het bericht in:
var alertBoodschap = "Gelieve volgende velden in te vullen:\n";
    
//Hieronder niets wijzigen:
var Boodschap = alertBoodschap.length;
for (var i = 0; i < verplichtVeld.length; i++){var obj = formulierVeld.elements[verplichtVeld[i]];if (obj){switch(obj.type){case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){alertBoodschap += "-" + veldBeschrijving[i] + "\n";}break;case "select-multiple":
if (obj.selectedIndex == -1){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}break;
case "text":case "textarea":if (obj.value == "" || obj.value == null){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}break;default:
if (obj.value == "" || obj.value == null){alertBoodschap += " - " + veldBeschrijving[i] + "\n";}}}}

if (obj.checked == false && obj.type == 'checkbox'){ 
alertBoodschap += " - " + veldBeschrijving[i] + "\n"; 
}

if (alertBoodschap.length == Boodschap){return true;}else{alert(alertBoodschap);return false;}}

</script>

Dus als iemand ook nog weet hoe ik die laatste waarde een naam kan geven (akkoord met regelement bijvoorbeeld) is t helemaal toppie!

[ Voor 7% gewijzigd door Svennos86 op 01-03-2009 17:05 ]

[TERW_DAN]

Wat is er momenteel undefined dan? De checkbox?

[Svennos86]

Uhh ja, waar nu undefined staat (omdat de checkbox niet is aangevinkt) moet komen te staan: Akkoord met busregelement

[TERW_DAN]

Dat is op zich logisch, gezien je dat buiten de de for loop hebt staan, dus i is niets.

Indent het script eerst eens, dan kun je een stuk makkelijker zijn waar welk stuk script precies staat (want }}}} achter elkaar is niet handig te lezen ).

[Svennos86]

<schaam modus>
uhmm wat is indenten??
</schaam modus>

[PainkillA]

Zorg er zeker voor dat alle required fields checks ook zeker in je php zitten. JS is makkelijk te omzeilen.

[Svennos86]

Ja ik ben er niet zo mee bezig dat t allemaal niet de veiligste oplossing is. dat is ook helemaal niet van belang bij dit formulier.

'T enige wat nu nog moet gebeuren is dat er geen undefined staat in t waarschuwingsvenster maar -Akkoord met Regelement, o.i.d

Ow en voor Terw-Dan heb ik even een indentation tooltje erover heen gedraaid:

code:

<script language = "JavaScript">
function formulierTest(formulierVeld) { 

//Geef hier de naam in van de verplichte velden, zoals in je formulier:
    var verplichtVeld = Array("naamveld", "mailadresveld", "opstap", "aantal"); //Geef hier de naam in die moet verschijnen in het alert-venster:
    var veldBeschrijving = Array("Naam", "Correct e-mail adres", "Opstapplaats", "Totaal aantal personen"); //Geef hier het bericht in:
    var alertBoodschap = "Gelieve het volgende aan te geven:\n"; 
    
    
//Hieronder niets wijzigen:
    var Boodschap = alertBoodschap.length;
    for (var i = 0; i < verplichtVeld.length; i++) {
        var obj = formulierVeld.elements[verplichtVeld[i]];
        if (obj) {
            switch (obj.type) {
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "") {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            case "text":
            case "textarea":
                if (obj.value == "" || obj.value == null) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            default:
                if (obj.value == "" || obj.value == null) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
            }
        }
    }
    if (obj.checked == false && obj.type == 'checkbox') {
        alertBoodschap += " - " + veldBeschrijving[i] + "\n";
    }
    if (alertBoodschap.length == Boodschap) {
        return true;
    } else {
        alert(alertBoodschap);
        return false;
    }
} 
</script>

[ Voor 79% gewijzigd door Svennos86 op 01-03-2009 18:10 ]

[Ch3cker]

Zoiets bedoelt ie :

code:

<script language="JavaScript">
function formulierTest(formulierVeld){


var verplichtVeld = Array("aantal", "akkoord"); //Geef hier de naam in van de verplichte velden, zoals in je formulier:
var veldBeschrijving = Array("Totaal aantal personen", "akkoord"); //Geef hier de naam in die moet verschijnen in het alert-venster:
var alertBoodschap = "Gelieve volgende velden in te vullen:\n"; //Geef hier het bericht in:
    
//Hieronder niets wijzigen:

var Boodschap = alertBoodschap.length;

    for (var i = 0; i < verplichtVeld.length; i++)
    {
    var obj = formulierVeld.elements[verplichtVeld[i]];
    
        if (obj)
        {
            switch(obj.type)
            {
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "")
                {
                alertBoodschap += "-" + veldBeschrijving[i] + "\n";
                }
            break;
            case "select-multiple":
                if (obj.selectedIndex == -1)
                {
                alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
            break;
            case "text":case "textarea":
                if (obj.value == "" || obj.value == null)
                {
                alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
            break;
            default:
                if (obj.value == "" || obj.value == null)
                {
                alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
            }
        }
    }
    
    if (obj.checked == false && obj.type == 'checkbox')
    { 
    alertBoodschap += " - " + veldBeschrijving[i] + "\n"; 
    }

    if (alertBoodschap.length == Boodschap)
    {
    return true;
    }
    else
    {
    alert(alertBoodschap);
    return false;
    }
}

</script>

edit : Tsjah, je was me voor

[Svennos86]

JAAAAAAAA!!!! t werkt!!!!

ik heb t laatste stukje van de puzzel nog ff in elkaar gestoken!

en dan zo:

code:

<script language = "JavaScript">
function formulierTest(formulierVeld) { //Geef hier de naam in van de verplichte velden, zoals in je formulier:
    var verplichtVeld = Array("naamveld", "mailadresveld", "opstap", "aantal", "akkoord"); 
    //Geef hier de naam in die moet verschijnen in het alert-venster:
    var veldBeschrijving = Array("Naam", "Correct e-mail adres", "Opstapplaats", "Totaal aantal personen", "Akkoord met busregelement"); 
    //Geef hier het bericht in:
    var alertBoodschap = "Gelieve het volgende aan te geven:\n"; 
    
    //Hieronder niets wijzigen:
    var Boodschap = alertBoodschap.length;
    for (var i = 0; i < verplichtVeld.length; i++) {
        var obj = formulierVeld.elements[verplichtVeld[i]];
        if (obj) {
            switch (obj.type) {
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "") {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            case "text":
            case "textarea":
                if (obj.value == "" || obj.value == null) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                break;
            default:
                if (obj.value == "" || obj.value == null) {
                    alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
                if (obj.checked == false && obj.type == 'checkbox') {
        alertBoodschap += " - " + veldBeschrijving[i] + "\n";
                }
            }
        }
    }
   
    if (alertBoodschap.length == Boodschap) {
        return true;
    } else {
        alert(alertBoodschap);
        return false;
    }
} 
</script>

dus wat er vanaf regel 39 tot 41 stond, staat nu na regel 34

Mijn dank is groot!