Kan man lave denne form-validering bl.a. via JavaScript?

UPS!
Det er selvfølgelig dette link:
https://www.keepit.com/da/KeepitPro/step1

:-/

Det laves udelukkende i JavaScript.

F.eks. således:

<script type="text/javascript">
function validateText(o){
  o.style.borderColor=o.value==""?"red":"green";
}
</script>

Navn: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateText(this)">

Og på det link, du viser, er der så bare også en funktion, der tjekker e-mail-adressen, om der er mellemrum i navnet, om kodeordene er minimum 6 tegn og ens og om rabatkoden er gyldig.

OK, det er jeg glad for at høre, for jeg har brug for netop denne form-validering, og det ser tilmed ret godt ud. :-)

MEN!
Du skriver: "Og på det link, du viser, er der så bare også en funktion, der tjekker..."
Men hvordan laver man "bare" disse funktioner? Fordi, for mig er det nemlig ikke "bare" at lave sådan noget.

Ja, det kommer jo så an på,.hvad du har behov for. =)
Det ville være lidt spild af tid for mig at sidde og lave dem allesammen, hvis du f.eks. kun skal tjekke e-mail-adresse.

Kan jeg evt. se den formular, det skal bruges på?

Det er til en standard-formular, som ligger i Joomla.

Felterne er:
    Navn
    E-mail adresse
    Bekræft  E-mail adresse (nyt felt som jeg gerne vil implementere)
    Overskrift
    Besked


PS:
Det ville være rigtigt rart, hvis du kunne indsætte kommentarer i scriptet (så en alm. dødelig som mig kan fatte hvordan det fungerer), så jeg senere selv kan foretage udvidelser.
Og senere kopiere og bruge scriptet et andet sted i mit website, til en log-in-formular, som jeg senere skal bruge. :-)

PPS:
Hvis det er et større arbejde, er jeg selvfølgelig frisk på at forhøje points. :-)

Selve kildekoden for kontakt-formularen, er her:

<form action="/kostvejlederguiden_001/index.php/kontakt.html" method="post" name="emailForm" id="emailForm" class="form-validate">
        <div class="contact_email">

            <label for="contact_name">
                &nbsp;Indtast dit navn:
            </label>
            <br />
            <input type="text" name="name" id="contact_name" size="30" class="inputbox" value="" />
            <br />
            <label id="contact_emailmsg" for="contact_email">
                &nbsp;Emailadresse:
            </label>
            <br />

            <input type="text" id="contact_email" name="email" size="30" value="" class="inputbox required validate-email" maxlength="100" />
            <br />
            <label for="contact_subject">
                &nbsp;Beskedemne:
            </label>
            <br />
            <input type="text" name="subject" id="contact_subject" size="30" class="inputbox" value="" />
            <br /><br />
            <label id="contact_textmsg" for="contact_text">

                &nbsp;Indtast din besked:
            </label>
            <br />
            <textarea cols="50" rows="10" name="text" id="contact_text" class="inputbox required"></textarea>
                        <br />
                <input type="checkbox" name="email_copy" id="contact_email_copy" value="1"  />
                <label for="contact_email_copy">
                    Email en kopi af denne besked til din egen adresse                </label>

                        <br />
            <br />
            <button class="button validate" type="submit">Send</button>
        </div>

    <input type="hidden" name="option" value="com_contact" />
    <input type="hidden" name="view" value="contact" />
    <input type="hidden" name="id" value="2" />
    <input type="hidden" name="task" value="submit" />

    <input type="hidden" name="80c2c08f87ac4bac56367082b08232f5" value="1" />    </form>

Prøv at se, om du kan få noget ud af dette her:

<script type="text/javascript">
function validateName(o){
    if(o.value!=""&&(o.value.indexOf(" ")!=-1&&o.value.indexOf(" ")<o.value.length-1)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateText(o){
    if(o.value!=""){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

var sValidateEmail=null;
function validateEmail(o){
    sValidateEmail=o.value;
    if(o.value.match(/^.*@\w[\w\.-]*\.[a-z]{2,6}$/)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateEmailConfirm(o){
    if(sValidateEmail==o.value){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}
</script>

<p>Navn: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateName(this)"></p>

<p>E-mail-adresse: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateEmail(this);validateEmailConfirm(document.getElementById('emailconfirm'))"></p>

<p>Bekræft e-mail-adresse: <input id="emailconfirm" style="border:1px solid #c0c0c0" type="text" onkeyup="validateEmailConfirm(this)"></p>

<p>Overskrift: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateText(this)"></p>

<p>Besked: <textarea style="border:1px solid #c0c0c0" onkeyup="validateText(this)"></textarea></p>

Jeg ved ikke lige, hvad jeg skal kommentere. Jeg har prøvet at gøre det så simpelt som muligt, så du må bare spørge, hvis du er i tvivl om noget.

Den virker ikke så godt...:

I første felt:
Herfra kan man godt hoppe videre til næste felt, uden at den viser en rød farve. Det skal den jo gøre.

Desuden skal den vise en grøn farve, når man har indtastet sine oplysninger. Det gør den heller ikke.


Så har jeg ikke testet mere.

Jeg havde ikke troet, det gjorde noget, at man kunne hoppe videre uden at den validerede. Men det har jeg nu løst ved også at lægge onkeydown på felterne.

Hos mig viser den da fint den grønne farve, når man har indtastet korrekte oplysninger?

Den nye kode:
-----------------------------------
<script type="text/javascript">
function validateName(o){
    if(o.value!=""&&(o.value.indexOf(" ")!=-1&&o.value.indexOf(" ")<o.value.length-1)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateText(o){
    if(o.value!=""){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

var sValidateEmail=null;
function validateEmail(o){
    sValidateEmail=o.value;
    if(o.value.match(/^.*@\w[\w\.-]*\.[a-z]{2,6}$/)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateEmailConfirm(o){
    if(sValidateEmail==o.value){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}
</script>

<p>Navn: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateName(this)" onkeydown="validateName(this)"></p>

<p>E-mail-adresse: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateEmail(this);validateEmailConfirm(document.getElementById('emailconfirm'))" onkeydown="validateEmail(this);validateEmailConfirm(document.getElementById('emailconfirm'))"></p>

<p>Bekræft e-mail-adresse: <input id="emailconfirm" style="border:1px solid #c0c0c0" type="text" onkeyup="validateEmailConfirm(this)" onkeydown="validateEmailConfirm(this)"></p>

<p>Overskrift: <input style="border:1px solid #c0c0c0" type="text" onkeyup="validateText(this)" onkeydown="validateText(this)"></p>

<p>Besked: <textarea style="border:1px solid #c0c0c0" onkeyup="validateText(this)" onkeydown="validateText(this)"></textarea></p>

<ole>

- men husk, det ikke giver mening at prøve at validere - endsige aflæse et felts værdi - under XHTML. Det kan kun gøres validt under HTML  ;o)

/mvh
</bole>

Så´n lige for at undgå misforståelser:

- Når jeg skriver validering, mener jeg at scriptet validerer om der er skrevet noget i feltet osv., og ikke en W3C validering. :-) Men så hedder det måske ikke en validering mere, når man taler om JavaScript, eller hvad? Tja, jeg ved det jo ikke. :-/

- Jeg bruger en alm. html 4.1 doctype, som denne:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test_001</title>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

- Jeg tester både i Firefox 3.0 og IE 7, på en WinXP incl. sp2 PC.


Jo, scriptet virker faktisk. :-) Jeg blev bare lidt forundret over metoden, som scriptet validerer på. Fordi, alle felter forbliver røde, indtil feltet er udfyldt korrekt.
Måske man kunne justere på dette...? Ideelt set burde scriptet forblive neutralt, indtil det enten er udfyldt forkert eller korrekt, og SÅ markere med enten den røde eller grønne farve. Men det er måske svært at lave...?
Specielt navnefeltet, som er rødt hele tiden, kræver at man skriver 2 navne før feltet bliver grønt, undres man lidt over. Det kræver mindst, at man skriver en oplysning under feltet om, at der skal skrives BÅDE for- og efternavn i forbindelse med udfyldelse af feltet, så brugerne ikke stejler undervejs. :-)

Nå, men jeg takker MEGET for hjælpen! :-)

PS:
Synes så´n lige, at jeg gerne vil forhøje points, for den løsning. :-) Så jeg forhøjer til 200, og kaster hele molevitten efter W13.
Og også en tak til dig, OleBole, som heller ikke plejer at være bleg for at kaste en hjælpende hånd eller to, afsted til spørgeren. :-)

Jeg takker for point! :)

Oleboles kommentar betød bare, at hvis du bruger XHTML og ikke HTML, så kan du ikke validere tekstfelter på en "lovlig" måde.

Og grunden til at han troede, du brugte XHTML, er at du skriver:
<br />
og:
<input type="checkbox" name="email_copy" ...  />

Dvs. du afslutter BR og INPUT med " />", hvilket du kun må i XHTML, så det er derved ikke gyldigt i følge W3C-standarderne.

Hvad angår min kode, så siger du, at den røde farve først skulle vises, hvis feltet var udfyldt forkert, men det er jo forkert lige fra begyndelsen, når det er tomt, og indtil der står det rigtige i feltet.

Mener du, at feltet først skulle valideres, når man går videre til næste felt?
I så fald skal du bare rette alle "onkeyup" til "onblur" og så fjerne alle onkeydown="..."

Hvis du ikke vil have, at der skal indtastes både for- og efternavn i feltet "Navn", så skal du bare rette validateName til validateText

Velbekommen, vedr. points. :-)

Vedr. OleBoles kommentar:
Ja, nu kan jeg godt se, hvor han fik det fra.
Sagen er, at jeg skal bruge scriptet til et Joomla-website, hvorfra jeg havde kopieret kildekoden, som jeg indsatte her: @18/06-2008 11:10:10. Og Joomla bruger XHTML.
Men når jeg selv koder og tester via min editor, bruger jeg html 4.1 Transitional som DOC-type.
Derfor misforståelsen. :-)


Vedr. valideringen af scriptet:

- Ideen med der skal indtastes både for- og efternavn i feltet "Navn", er rigtig god. :-)

- Og ja, jeg tror at det er bedst, hvis feltet først skal valideres, når man går videre til næste felt.
Det er altså dette, som skal rodes lidt videre med? :
"onkeyup" til "onblur" og så fjerne alle onkeydown="..."
Øh... kan jeg bede dig om at rette det til for mig, tak?

<script type="text/javascript">
function validateName(o){
    if(o.value!=""&&(o.value.indexOf(" ")!=-1&&o.value.indexOf(" ")<o.value.length-1)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateText(o){
    if(o.value!=""){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

var sValidateEmail=null;
function validateEmail(o){
    sValidateEmail=o.value;
    if(o.value.match(/^.*@\w[\w\.-]*\.[a-z]{2,6}$/)){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}

function validateEmailConfirm(o){
    if(sValidateEmail==o.value){
        o.style.borderColor="green";
    }else{
        o.style.borderColor="red";
    }
}
</script>

<p>Navn: <input style="border:1px solid #c0c0c0" type="text" onblur="validateName(this)"></p>

<p>E-mail-adresse: <input style="border:1px solid #c0c0c0" type="text" onblur="validateEmail(this);validateEmailConfirm(document.getElementById('emailconfirm'))"></p>

<p>Bekræft e-mail-adresse: <input id="emailconfirm" style="border:1px solid #c0c0c0" type="text" onblur="validateEmailConfirm(this)"></p>

<p>Overskrift: <input style="border:1px solid #c0c0c0" type="text" onblur="validateText(this)"></p>

<p>Besked: <textarea style="border:1px solid #c0c0c0" onblur="validateText(this)"></textarea></p>

Således. =)

Som du ser, har jeg erstattet alle forekomster af "keyup" med "blur" og fjernet alle "onkeydown"-attributter.

w13:
Det er super! Tak! :-)

extend >> Du kan ikke blande en HTML 4.01 DTD sammen med kode, hvor tags lukkes med ' />'. De lukninger giver godtnok mening under HTML 4.01, men browserne håndhæver (i hvertfald øjeblikket) ikke dette.

Koden <br /> burde således renderes som <br>> under HTML  ;o)

olebole:
Jepper, du har helt ret. Brugeren "w13" fortalte mig også om det, og jeg besvarede ham her: @19/06-2008 08:29:46
Det er fordi, at jeg bare kaster koden ind i en standard-master til HTML 4.01, som ligger i min editor, når jeg tester lokalt. Derfor kom sammenblandingen med den typer tags <br /> og HTML 4.01 DOC-typen. :-)

Okay - hold dig bare til HTML 4.01 Strict og slet XHTML-lukningerne. Du og brugerne har alligevel ingen glæde af XHTML idag - og f.eks. XHTML 1.0 Transitional vil også i al fremtid blive tolket som skidt HTML  =)