[HTML] Algemene formfield check met error report, mogelijk ?

[Verwijderd]

Dit is eigenlijk een beetje een Programming vraag, maar aangezien de eigenlijke vraag over HTML gaat plaats ik hem hier.

Ik heb een array waar ik doormiddel van een script in PHP text en formfield splits.

Ik zal het nader uitleggen aan de hand van mijn array:

PHP:

[1] => Array
        (
            [FieldType:] => Text
            [FieldName:] => box1
            [FieldNameAlt:] => Box1
            [FieldFlags:] => 0
            [FieldValue:] => 
            [FieldJustification:] => Left
            [FieldMaxLength:] => 100
        )

    [2] => Array
        (
            [FieldType:] => Text
            [FieldName:] => box2
            [FieldNameAlt:] => Box2
            [FieldFlags:] => 0
            [FieldJustification:] => Left
            [FieldMaxLength:] => 100
        )

    [3] => Array
        (
            [FieldType:] => Text
            [FieldName:] => box3
            [FieldNameAlt:] => Box3
            [FieldFlags:] => 0
            [FieldJustification:] => Left
            [FieldMaxLength:] => 13
        )

Wat ik doe is ik maak 2 cellen naast elkaar aan waarbij ik in de linker Kolom de [FieldNameAlt:] laat printen en in de andere cel (rechter) een [FieldType] die ingevuld kan worden.

Het aantal rijen hangt af van hoe groot mijn array is.

Aangezien ik dus niet weet hoe groot mijn formulier wordt wil ik een manier verzinnen om een algemene formcheck op de velden toe te passen bij submit.

Wat ik wil proberen is om een standaard text te gebruiken als: "U heeft ..... niet ingevuld." Waarbij ..... Box1, Box2 of Box 3 kan zijn.

Het probleem is alleen dat ik geen javascript, zoals je normaal gesproken gebruikt, apart aan ieder formfield toe kan passen.

Mijn idee was om een function() te gebruiken en deze function_NAAM() aan te passen aan de hand van de FieldName of FieldNameAlt.

Je zou dan, denk ik, een algemene check kunnen uitvoeren over alle functies en eruit pakken wat nodig is en deze via een normaal pop-up scherm (zo'n grijs geval met een OK-knop) printen naar de gebruiker met wat er niet is ingevuld.

MIjn vraag is of dit zo dynamisch te maken is. Ik weet dus nooit hoeveel formfields ik heb, dit kunnen er 10 zijn, maar ook 20. De reden hiervan is dat ik ze uit een PDF bestand importeer en aangezien het er maar net aan ligt hoeveel formfields ik daar in zet.

Ik zou ook een statische Form-pagina kunnen maken, dit is alleen niet de bedoeling van het script dus wil ik het zo proberen.

[marty]

Verwijderd schreef op vrijdag 04 mei 2007 @ 00:53:
Het probleem is alleen dat ik geen javascript, zoals je normaal gesproken gebruikt, apart aan ieder formfield toe kan passen.

Normaal gesproken valideer je volgens mij servers-side, aangezien een javascript validatie geen enkele garanties biedt.

Ik zou je array gewoon uitbreiden zodat je kan aangeven of een veld moet worden ingevuld en eventueel een regex die controleert wat er is ingevuld. Dit gebruik je dan om server-side je formulier te checken.

Vervolgens zou je die zelfde array kunnen gebruiken om een stukje javascript uit te poepen, die clientside precies hetzelfde doet. Op basis van de PHP array kun je een javascript array aanmaken die je gebruikt op het moment dat het formulier gesubmit wordt. Breid je je PHP array uit, dan zal de javascript array ook gelijk uitbreiden.

[crisp]

De beste manier om een generieke error-handler in javascript te maken is denk ik door per element aan te geven wat de voorwaarden en restricties zijn. Je kan dan het wiel opnieuw gaan uitvinden, maar je zou ook eens kunnen kijken naar WebForms 2.0 waar o.a. Opera al support voor biedt en waar script-alternatieven voor beschikbaar zijn voor andere browsers.

Zie o.a. ook deze artikelen mbt WebForms:
http://dev.opera.com/arti...e-your-forms-using-html5/
http://dev.opera.com/arti...ages-work-with-web-forms/

[Martinspire]

Wat je ook kunt gebruiken om formulieren te maken zonder veel te hoeven programmeren is FormHandler. Check www.formhandler.net maar es. Daarmee kun je ook gemakkelijk de input checken en je eigen foutmeldingen genereren.

[Verwijderd]

crisp schreef op vrijdag 04 mei 2007 @ 11:02:
De beste manier om een generieke error-handler in javascript te maken is denk ik door per element aan te geven wat de voorwaarden en restricties zijn. Je kan dan het wiel opnieuw gaan uitvinden, maar je zou ook eens kunnen kijken naar WebForms 2.0 waar o.a. Opera al support voor biedt en waar script-alternatieven voor beschikbaar zijn voor andere browsers.

Zie o.a. ook deze artikelen mbt WebForms:
http://dev.opera.com/arti...e-your-forms-using-html5/
http://dev.opera.com/arti...ages-work-with-web-forms/

Ja dit is waar, maar kan ik dan niet beter mijn formulier ook statisch in elkaar zetten inplaats van aan te maken door mijn info uit de array te halen en zo het formulier op te bouwen ?

Dit is namelijk, volgens mij, het grote nadeel van het genereren van het formulier aan de hand van variabelen, de check zal vaste gegevens moeten bevatten en kan dus iet dynamisch aan de hand van de array opgebouwd worden.

[Verwijderd]

Ik ga toch maar een test doen met een statisch gebouwde form. De reden is vrij simpel:

Aangezien je aan een vaste layout zit wanneer je een form genereert aan de hand van een array kun je dus weinig wijzigen aan meldingen wanneer zaken niet ingevuld zijn.

Het is opzich heel mooi en lekker snel je form te genereren uit een array, het blijkt alleen dat je echt aan een simpele form vast zit.

Tja, het is het een of het ander natuurlijk.

[marty]

Verwijderd schreef op vrijdag 04 mei 2007 @ 23:01:
Ik ga toch maar een test doen met een statisch gebouwde form. De reden is vrij simpel:

Aangezien je aan een vaste layout zit wanneer je een form genereert aan de hand van een array kun je dus weinig wijzigen aan meldingen wanneer zaken niet ingevuld zijn.

Net zoals dat je een bepaalde check op een element kan zetten kun je toch ook een bepaalde error-melding zetten in het geval dat ie faalt?
Ik zie niet in waarom dat een beperking zou moeten betekenen

[SchizoDuckie]

marty schreef op maandag 07 mei 2007 @ 11:06:
[...]


Net zoals dat je een bepaalde check op een element kan zetten kun je toch ook een bepaalde error-melding zetten in het geval dat ie faalt?
Ik zie niet in waarom dat een beperking zou moeten betekenen

Ik snapte het ook al niet echt ?

Je bedoelt da tje serverside je form wil kunnen genereren en dan clientside wat validaties eroverheen wil schoppen?

Dan genereer je die toch lekker gelijk mee?

Verder moet je waarschijnlijk eens zoeken op unobtrusive + DOM, je kan namelijk gewoon dynamagisch een DIV elementje aanmaken ofzo, daar een classname aan toekennen, en een textNode eraanvast plakken (of innerHTML setten) en zo gelijk een foutmelding tonen.

Is dan de fout opgelost dan verberg je het divje dat je net aangemaakt hebt weer.
't is allemaal niet zo moeilijk meer hoor tegenwoordig Als je bijv. geen zin hebt om de hele DOM uit je hoofd te leren kijk dan eens naar mootools voor hoe je dit moet doen

JavaScript:

$('myInputElement').statusMessage = new Element('DIV', {'class':'errorMessage'}).appendText('Sorry dit veld is verkeerd ingevuld').injectInside($('myInputElement').getParent()); // maak nieuwe div class='errormessage' aan en insert hem in de container van de input met id myinputelement

[moozzuzz]

Ooit maakte ik es 't volgende (niet zo intelligent als generieke errorhandlers etc). Maar ik ben er van overtuigd dat het kan geoptimaliseerd kan worden!

JavaScript:

var tocheck  = new Array();
var submitOK = new Array();
var touched  = new Array();

/* fill the array according the form */
for (i=0;i<document.forms['contactform'].length;i++)
{
    tocheck [document.forms['contactform'][i].name] = 0; /* 0: niet checken; anders: wél checken */
    submitOK[document.forms['contactform'][i].name] = false; /* false: NOK; true: OK */
    touched [document.forms['contactform'][i].name] = 0; /* 0: No; 1: Yes */
}

/* stel de te checken velden in */
tocheck['n3']   = 'e';

function checkForm(name)
{
    canBeSent = true;
    reg_email = '^(([^<>;()[\]\\.,;:@"]+(\.[^<>()[\]\\.,;:@"]+)*)|(".+"))@((([a-z]([-a-z0-9]*[a-z0-9])?)|(#[0-9]+)|(\\[((([01]?[0-9]{0,2})|(2(([0-4][0-9])|(5[0-5]))))\.){3}(([01]?[0-9]{0,2})|(2(([0-4][0-9])|(5[0-5]))))\]))\.)*(([a-z]([-a-z0-9]*[a-z0-9])?)|(#[0-9]+)|(\\[((([01]?[0-9]{0,2})|(2(([0-4][0-9])|(5[0-5]))))\.){3}(([01]?[0-9]{0,2})|(2(([0-4][0-9])|(5[0-5]))))\]))$';

    var f = document.forms[name];
    
    /* do the checks */
    for (i=0;i<f.length;i++)
    {
        if ((tocheck[f[i].name] != 0) && (tocheck[f[i].name]!=null))
        {
            switch(tocheck[f[i].name])
            {
            case 'e': /* email */
            {
                submitOK[f[i].name] = (f[i].value.match(reg_email)) ? true : false;
            }
            break;
            case 'p': /* phone */
            {
                // phone check
            }
            break;
            case 1:
            {
                // numeral check
            }
            }
        }
    }

    /* evaluate the form */
    for (i=0;i<f.length;i++)
    {
        alert(tocheck[f[i].name] + " - canBeSent["+i+" / "+ f[i].name +"]: "+canBeSent);
        if ((tocheck[f[i].name] != 0) && (tocheck[f[i].name]!=null))
        {
            canBeSent = canBeSent && submitOK[f[i].name];
        }
    }
    return canBeSent;
}

HTML:

<form name="contactform" onSubmit="return checkForm(this.name);">