|
| Validering Fra : Lars Olesen |
Dato : 09-01-04 23:46 |
|
Jeg sidder og bøvler med noget javascript-validering af formularer, men
jeg synes ikkke rigtig, at jeg får gjort det tilgængeligt nok. Jeg har
taget udgangspunkt i html.dk's måde at gøre det på, men det betyder, at
man skal sidde og skrive særskilt validering for hver enkelt felt, og
det virker ret besværligt, hvis man fx bare vil tjekke om nogle felter
er fyldte og andre er checket af - eller de skal have en særlig længde
eller bare være tal.
Er der overhovedet nogen, der validerer clientside længere, eller skal
man bare nøjes med at lave sin serversidevalidering, som jo skal ske?
Det kunne i tilgift være ret smart, hvis man så snart man havde forladt
et felt fik det valideret ved at der kom et lille rettetegn eller et
kryds ud for?
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lars Olesen (10-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 10-01-04 20:15 |
|
Lidt flere tanker:
Ofte så vil man jo blot gerne have, at brugeren har indtastet noget data
i formularfelterne, inden vedkommende submitter formularen, men nogle
felter er måske ikke nødvendige. Vi har altså required-felter. Det ville
være smart, om JS hurtigt lige kunne kigge igennem dem alle og se, om
der var noget indhold i dem.
Jeg har set noget, der ligner noget her:
http://webreference.com/new/cfjsvalidate2.html
Men det stopper tilsyneladende så snart det finder en fejl. Jeg synes
jo, at det er smartere at alle fejl samles og til sidst vises i en
alert-box, så brugeren kan rette det hele og så forsøge igen?
Jeg fandt også lidt på denne side om validering, men jeg synes ikke
løsningen er særlig elegant.
http://youngpup.net/
Kig under Snippets > Client Validation.
Scriptet skal egentlig kun understøtte DOM-browsere (og naturligvis lade
være at crashe de anddre :) Er der nogen der har nogle referencer til
nogle flere sider på nettet, hvor jeg måske kan læse mig lidt klogere.
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lars Olesen (10-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 10-01-04 20:44 |
|
> Lidt flere tanker:
Jamen, så endnu flere tanker da:
Naturligvis må en validering heller ikke være alt for påståelig. Fx hvis
man har lavet en e-mail-valideringsregel forkert, så kan det jo ikke
nytte noget, at brugeren ikke kan komme igennem. I stedet kan man måske
fortælle brugeren, at der vist er fejl i e-mail-adressen, men hvis han
igen klikker på submit, så går det alligevel igennem.
Hvordan griber man sådan noget an?
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lasse Reichstein Nie~ (11-01-2004)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 11-01-04 02:00 |
|
Lars Olesen <lsolesen@hotmail.com> writes:
> Men det stopper tilsyneladende så snart det finder en fejl. Jeg synes
> jo, at det er smartere at alle fejl samles og til sidst vises i en
> alert-box, så brugeren kan rette det hele og så forsøge igen?
Enig. Jeg har en meget generisk valideringsfunktion her:
<URL: http://www.infimum.dk/HTML/validering.html>
Hvis man skriver i hånden, er formatet ca:
function validate(form) {
var errors = [];
if (!test1(form.elements['dims'])) {
errors.push("fejlbesked: dims er ikke dut");
}
...
if (!test27(form.elements['flim'])) {
errors.push("fejlbesked: flim skulle være flam");
}
if (errors.length > 0) {
alert("Formularen er ikke acceptabelt udfyldt!\n"+errors.join("\n"));
return false;
}
return true;
}
Faktisk er en alert ikke særlig god til at give flere
fejlbeskeder. Den forsvinder inden man kan få lov til at rette den
første fejl, så man skal kunne huske alle fejlene i hovedet.
Det er bedre at skrive fejlbeskederne ind på siden, enten samlet,
eller (endnu bedre) tæt på feltet.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Lars Olesen (11-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 11-01-04 09:47 |
|
Lasse Reichstein Nielsen wrote:
[snip script-forklaring]
> Faktisk er en alert ikke særlig god til at give flere
> fejlbeskeder. Den forsvinder inden man kan få lov til at rette den
> første fejl, så man skal kunne huske alle fejlene i hovedet.
> Det er bedre at skrive fejlbeskederne ind på siden, enten samlet,
> eller (endnu bedre) tæt på feltet.
Dit script er klart det bedste jeg nogensinde har set. Jeg har allerede
implementeret det, og jeg er enig i, at en alert ikke er den bedste
løsning. Derfor kan jeg også godt lide din måde at gøre det på, hvor
boksene farves røde.
Jeg kan imidlertid ikke helt få isSelected() til at virke. Er der noget
særligt man skal tænke på i forbindelse med den?
<form onsubmit="return minValidering.validate(this);">
<select name="kat" id="kat">
<option>Vælg en</option>
<option value="1">Kategori 1</option>
</select>
</form>
<script type="text/javascript">
var minValidering = new FormValidator(
[
["kat",isSelected,"Du skal vælge en kategori"]
]);
</script>
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lars Olesen (11-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 11-01-04 10:17 |
| | |
Lasse Reichstein Nie~ (11-01-2004)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 11-01-04 20:33 |
|
Lars Olesen <lsolesen@hotmail.com> writes:
> Jeg har to selectbokse multiple, som jeg flytter værdier mellem. Kan
> man på nogen måde lave et tjek på, om de værdier der er i venstre
> checkboks er selected, men kun hvis der er værdier skal tjekket
> laves. Dvs. man må gerne aflevere boksen tom?
Ikke forstået.
Du hr to selectboxe med multiple.
Du vil tjekke om der er valgt nogen i den venstre?
Men kun hvis et eller andet har værdier (hvilke) skal man tjekke om
der er valgt noget?
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Lars Olesen (11-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 11-01-04 21:45 |
|
> Du hr to selectboxe med multiple.
Ja, som flytter options fra den ene til den anden.
> Du vil tjekke om der er valgt nogen i den venstre?
Jeg vil tjekke om options i select-boksen er valgt, men jeg kan ikke
være sikker på, at der overhovedet er nogen options, for den starter
uden options - og det må den også gerne.
Men hvis de ikke er valgt på submit, så skal valideringen spørge om det
kan være rigtigt :)
Var det mere forståeligt?
I øjeblikket kører jeg med en automatisk select af værdierne, men tænk
hvis den pludselig fejler, og man mister alle de data man har i
select-boksen, fordi de jo ikke følger med på submit, hvis de ikke er
markeret!
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lasse Reichstein Nie~ (11-01-2004)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 11-01-04 20:51 |
|
Lars Olesen <lsolesen@hotmail.com> writes:
> Dit script er klart det bedste jeg nogensinde har set.
Takker :)
> Jeg kan imidlertid ikke helt få isSelected() til at virke. Er der
> noget særligt man skal tænke på i forbindelse med den?
Den virker kun til select-multiple, eller en select med size="2" eller
større. I en almindelig select med kun en synlig option, er den viste
option automatisk valgt.
Du har nok mere brug for
function optionHasValue(elem) {
return elem.selectedIndex >= 0 && !!elem.options[elem.selectedIndex].value;
}
Den returnerer true hvis den valgte option har en (ikke tom) værdi
tilknyttet. Alternative kan du bare udelukke den første option:
function optionNotFirst(elem) {
return elem.selectedIndex > 0;
}
Der er dog en fejl i min kode, som jeg ikke havde opdaget før. Det
er i markeringen af fejl i et select-element. Koden bruger optimistisk
det at der er en length-egenskab til at antage at det er en collection
af input-elementer (oftest radio-buttons eller lignenede), men et
select-element har også en længde. Så ret linjen
if (elem.length) { // collection, e.g., radiobuttons
til
if (elem.length && !elem.options) { // collection, e.g., radiobuttons
Tak fordi du fik mig på sporet af den. Jeg har opdateret siden.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Lars Olesen (11-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 11-01-04 21:41 |
|
>>Dit script er klart det bedste jeg nogensinde har set.
> Takker :)
Så lidt :)
[snip noget om hvorfor select ikke virker ]
Tænkte nok, at det var fordi jeg var en fladpande :) Tak for det hurtige
svar.
> Der er dog en fejl i min kode, som jeg ikke havde opdaget før. Det
Den har jeg hermed rettet på min side :)
> Tak fordi du fik mig på sporet af den. Jeg har opdateret siden.
Ja, hvis jeg helt vidste, hvordan jeg gjorde
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lars Olesen (12-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 12-01-04 22:12 |
|
>>Dit script er klart det bedste jeg nogensinde har set.
Jeg tror imidlertid der er lidt problemer med følgende funktion :
function isDate(elem) {
// cannot get this part to work?
if (!/^\d{4}\/\d{2}\/\d{2}$/.test(elem.value)) {
return false; // format forkert
}
var parts = elem.value.split("-");
var day = new Date(+parts[0],parts[1]-1,+parts[2]);
if (day.getDate() != +parts[2] ||
day.getMonth() != parts[1]-1) {
return "Datoen findes ikke. Formatet er åååå-mm-dd.";
}
return true;
}
Hvis den øverste if inkluderes kan den i hvert fald ikke validere
1976-06-14?
--
Lars
www.fodboldenslegestue.dk www.larsolesen.dk
www.discimport.dk www.vih.dk
| |
Lasse Reichstein Nie~ (11-01-2004)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 11-01-04 22:57 |
|
Lars Olesen <lsolesen@hotmail.com> writes:
>> Du hr to selectboxe med multiple.
>
> Ja, som flytter options fra den ene til den anden.
>
>> Du vil tjekke om der er valgt nogen i den venstre?
>
> Jeg vil tjekke om options i select-boksen er valgt, men jeg kan ikke
> være sikker på, at der overhovedet er nogen options, for den starter
> uden options - og det må den også gerne.
Ok, så der skal enten ikke være nogen options, eller der skal være
options og mindst en valgt.
function emptyOrSelected(elem) {
return elem.length == 0 || elem.selectedIndex != -1;
}
> Men hvis de ikke er valgt på submit, så skal valideringen spørge om
> det kan være rigtigt :)
>
> Var det mere forståeligt?
jep, tror jeg.
> I øjeblikket kører jeg med en automatisk select af værdierne, men tænk
> hvis den pludselig fejler, og man mister alle de data man har i
> select-boksen, fordi de jo ikke følger med på submit, hvis de ikke er
> markeret!
Så de skal alle sammen være selected? Så er det noget i stil med:
function allOptionsSelected(elem) {
for (var i=0;i<elem.length;i++) {
if (!elem.options[i].selected) { return false; }
}
return true;
}
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Lars Olesen (11-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 11-01-04 23:06 |
| | |
Jens Gyldenkærne Cla~ (12-01-2004)
| Kommentar Fra : Jens Gyldenkærne Cla~ |
Dato : 12-01-04 23:46 |
|
Lars Olesen skrev:
> Jeg tror imidlertid der er lidt problemer med følgende
> funktion :
Mon ikke funktionen blot er låst til et andet datoformat end du
forventer?
> if (!/^\d{4}\/\d{2}\/\d{2}$/.test(elem.value)) {
- tjekker at datoen har formatet
[4 tal][skråstreg][2 tal][skråstreg][2 tal]
> Hvis den øverste if inkluderes kan den i hvert fald ikke
> validere 1976-06-14?
Prøv med 1976/06/14. Hvis man også vil tillade punktum og
bindestreg som skilletegn, vil jeg tro at if-sætningen kan skrives
som her:
if (!/^\d{4}[\/\-\.]\d{2}\/[\/\-\.]\d{2}$/.test(elem.value)){
- der dog også godtager 1973-10/2 og 2000.03-24 (men det er måske
heller ikke noget problem).
Jeg er ikke helt sikker på at punktum og bindestreg skal escapes,
men prøv evt. begge muligheder.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Lars Olesen (13-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 13-01-04 00:16 |
| | |
Lasse Reichstein Nie~ (13-01-2004)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 13-01-04 00:51 |
|
Lars Olesen <lsolesen@hotmail.com> writes:
> Jeg tror imidlertid der er lidt problemer med følgende funktion :
>
> function isDate(elem) {
> // cannot get this part to work?
> if (!/^\d{4}\/\d{2}\/\d{2}$/.test(elem.value)) {
> var parts = elem.value.split("-");
> Hvis den øverste if inkluderes kan den i hvert fald ikke validere
> 1976-06-14?
Hov, ja. Der skiftede jeg vist hest midt i vadestedet. Den første
tester på formatet yyyy/mm/dd, mens resten bruger ISO-standarden
(yyyy-mm-dd). Den vil blive rettet snarligst. Takker :)
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
Lars Olesen (13-01-2004)
| Kommentar Fra : Lars Olesen |
Dato : 13-01-04 01:05 |
| | |
|
|