Søg
Avatar billede mcclaud Nybegynder
22. januar 2011 - 14:54 Der er 9 kommentarer og
1 løsning

Små tilføjelser til eksisterende JavaScript

Jeg er i gang med at lave en hjemmeside til min kæreste og har primært en mindre udfordring med noget validering til nogle felter i en formular... Jeg kunne godt tænke mig følgende:

A) Feltet 'Postnr.': Her må kun indtastes tal, ikke bogstaver eller andre tegn. Endvidere skal der indtastes netop fire tal, hverken flere eller færre.

B) Feltet 'Telefonnr.': Her må kun indtastes tal, ikke bogstaver eller andre tegn. Endvidere skal der indtastes netop otte tal, hverken flere eller færre.

C) Feltet 'Kommentar'. Her fades teksten desværre ikke væk, når curseren placeres i feltet, som det sker i de øvrige felter. Jeg håber, at det let kan rettes ved brug af det eksisterende 'hint-textbox.js'.

D) Feltet 'Kendskab til Picturing Life'. Internet Explorer 8.0 fejler og kræver ikke, at brugeren vælger en anden valgmulighed end den førstnævnte på listen. Firefox 3.6 derimod validerer feltet, som det er tænkt, nemlig som forkert udfyldt, når første valgmulighed er valgt.

Se scriptet her og vær opmærksom på, at rettelserne kun gælder felterne på sidens venstre halvdel. Den lille formular i højre side (Kunstpaletten) fungerer uafhængigt:
http://www.peterdue.com/picturing-life/udstillinger_henvendelse.htm#indhold

mvh mcclaud
Avatar billede olsensweb.dk Ekspert
22. januar 2011 - 16:13 #1
a og b
http://www.webdeveloper.com/forum/showthread.php?t=220303

function ValidateDigit(elm) {
        var fourDigits = /^\d{4}$/;
        var formValue = elm.value
        // var formValue = document.demo.monthYear.value;
        var trimmed = formValue.replace(/^\s+|\s+$/g, '');

        if (fourDigits.test(trimmed))        {
            // alert("Four Digits");
        }
        else{
            alert("Not four digits.");
        }
        return false;
    }


ved 6 digit er det selvføgelig 6 der skal stå var fourDigits = /^\d{6}$/;

<input type="text" name="Postnr" value="Postnr" onfocus="ClearThisField(this)" onblur="ValidateDigit(this); GetCityName(this.value, 'By')" size="10" style="font-family: Verdana; font-size: 8pt; color:#808080">&nbsp;
Avatar billede olsensweb.dk Ekspert
22. januar 2011 - 20:27 #2
d)http://bytes.com/topic/javascript/answers/635161-how-get-value-drop-down-internet-explorer
[cut]
Assign it a value attribute.
The form below works in Firefox and Safari. But not in Internet
Explorer. Can someone tell me how to code this so IE understands it?
<option value="A">A</option>

IE doesn't correlate the value of a select as being the text of a select
element.
[/cut]
tilføj lige denne rettelse og e om det ikke virker, har ikke selv tested det

en lille rettelse til tidligere script

function ValidateDigit(elm, antal) {
var regstr ='^\\d{'+antal+'}$';
var pattern = new RegExp(regstr);       
var trimmed = elm.value.replace(/^\s+|\s+$/g, '');       
if (!pattern.test(trimmed)) {
alert("De har kke indtasted "+antal+" tal");
}               
}


<input type="text" name="Postnr" value="Postnr" onfocus="ClearThisField(this)" onblur="ValidateDigit(this, 4); GetCityName(this.value, 'By')" size="10" style="font-family: Verdana; font-size: 8pt; color:#808080">&nbsp;


tlf feltet skal selvføgelig bare kaldes med ValidateDigit(this, 8)

så er man fri for at lave 2 functioner hvor man hardcoder antallet ind

C) kan du ikke bruge sammen løsning som i
http://www.eksperten.dk/spm/927538 #21
Avatar billede olsensweb.dk Ekspert
23. januar 2011 - 11:18 #3
ang. A og B   
faldt lige over denne http://snipplr.com/view/568/numbers-only/
function numbersOnly(el){ 
  el.value = el.value.replace(/[^0-9]/g, ""); 
}
     
function onlyXDigit(elm, antal){
  var lng = elm.value.length
  if(lng == antal) return (true);
  else{
    if(lng<antal) alert('De har kun indtasted '+lng+' tal, de skal indtaste '+antal+'tal.');
    else alert('De har indtasted '+lng+' tal, de må kun indtaste '+antal +'tal.');
  }
  elm.focus(); // virker ikke, muligvis pga der udføres flere ting onblur
  return (false);
}


[div]<input type="text" name="Postnr" value="Postnr" onfocus="ClearThisField(this)" onkeyup="numbersOnly(this)" onblur="onlyXDigit(this, 4); GetCityName(this.value, 'By')" size="10" style="font-family: Verdana; font-size: 8pt; color:#808080">&nbsp;[div]
tlf feltet     onkeyup="numbersOnly(this)" onblur="onlyXDigit(this, 8)
denne løsning er faktisk pænere end tidligere løsning, da den tester løbende (onkeyup), så man kun får lov at skrive tal, og tester når man forlader feltet (onblur), om man har indtasted det rigtige antal.
Avatar billede mcclaud Nybegynder
23. januar 2011 - 13:16 #4
Hej ronols

Tak for dine fine bidrag... Jeg har fået klaret opgave C (Kommentar-feltet) og D (Kendskabs-feltet), så det bare virker, som de skal. Alle tiders.  :o)

Når det kommer til opgave A (Postnr.-feltet) og B (Telefonnr.-feltet), håber jeg på en anden løsning, hvor den eksisterende function (Form2_Validator), som i forvejen tester alle formularens felter også kan teste, om Postnr.-feltet og Telefonnr.-feltet udelukkende består af tal og de rigtige mængder af tal (henholdsvis 4 og 8). Jeg kunne altså godt tænke mig at få udskiftet præcis denne kode (eks. Postnr.-feltet):

{
// check if postal code field is correct
if (theForm.Udstillinger_Postnr.value == "Postnr.")
  {
    alert("Anfør venligst postnr. i feltet: Postnr.");
    theForm.Udstillinger_Postnr.focus();
    return (false);
  }

med en kode som kan validere, om der er tal i feltet, og om der er netop 4 tal i feltet. Se evt. koden vedr. valideringen af E-mail-feltet til inspiration.

Jeg håber meget, at det kan lade sig gøre. På forhånd mange tak og ha' en rigtig go' søndag...

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
23. januar 2011 - 14:18 #5
ja inline style er selvføgelig også en mulighed.
<textarea tabindex="18" onfocus="this.value=''" style="font-family: Verdana; font-size: 8pt; color: rgb(128, 128, 128);" cols="29" name="Udstillinger_Kommentar" rows="5">Kommentar</textarea>

du har da ikke sat value på kendskab til dropdown boxen
og du validerer stadig sådan, som kun virker i FF
// check if knowledge field is correct
if (theForm.Udstillinger_Kendskab.value == "Kendskab til Picturing Life")
  {
    alert("Anfør venligst kendskabet til Picturing Life i feltet: Kendskab til Picturing Life");
    theForm.Udstillinger_Kendskab.focus();
    return (false);
  }


A og B
lynhurtig lavet ej tested
 
erstat disse 2 
// check if postal code field is correct
if (theForm.Udstillinger_Postnr.value == "Postnr.")
  {
    alert("Anfør venligst postnr. i feltet: Postnr.");
    theForm.Udstillinger_Postnr.focus();
    return (false);
  }
 
// check if phone no. field is correct
if (theForm.Udstillinger_Telefonnr.value == "Telefonnr.")
  {
    alert("Anfør venligst telefonnr. i feltet: Telefonnr.");
    theForm.Udstillinger_Telefonnr.focus();
    return (false);
  }

 
  med

var postnrvalue =  theForm.Udstillinger_Postnr.value;
    var fourDigits = /^\d{4}$/;
    if (!fourDigits.test(postnrvalue))       
    {
        alert("De har ikke indtasted 4 og kun 4 tal i feltet: Postnr.");
        theForm.Udstillinger_Postnr.focus();
        return (false);
    }

    var telefonnrvalue =  theForm.Udstillinger_Telefonnr.value;
    var eightDigits = /^\d{8}$/;
    if (!eightDigits.test(telefonnrvalue))       
    {
        alert("De har ikke indtasted 8 og kun 8 tal i feltet: Telefon nummer. vær opmærksom der må IKKE være mellemrum");
        theForm.Udstillinger_Telefonnr.focus();
        return (false);
    }   
Avatar billede mcclaud Nybegynder
23. januar 2011 - 15:38 #6
Hej ronols

Så er opgave A (Postnr.-feltet) og B (Telefonnr.-feltet) også på plads... Perfekt. Jeg forstår ikke, hvad du mener vedr. opgave D (Kendskabs-feltet), for jeg har tilføjet 1. valgmulighed på listen en value, og det virker glimrende i min Internet Explorer 8.0. Dette er, hvad jeg har gjort:

<option value="Kendskab til Picturing Life">Kendskab til Picturing Life</option>

Endnu engang tusind tak for al din hjælp, ronols. Hvis du poster et svar, er der points på vej.

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
23. januar 2011 - 16:15 #7
>jeg har tilføjet 1. valgmulighed på listen en value, og det virker glimrende i min Internet Explorer 8.0.

<select size="1" name="Udstillinger_Kendskab" style="font-family: Verdana; font-size: 8pt; color: #808080" tabindex="19">
        <option value="Kendskab til Picturing Life">Kendskab til Picturing Life</option>
        <option>Via en udstilling</option>
        <option>Via en ven/bekendt</option>
        <option>Via Internettet</option>
        <option>Via Facebook</option>
        <option>Andet</option>
</select>

kiggede kun hurtigt på det, og så kun det fremhævet.
du bør sætte value på resten også.
det er da korrekt der kun testes på den øverste, men hvad så når du submitter formen, får du værdier med over, hvis der submittes fra IE ??
Avatar billede mcclaud Nybegynder
23. januar 2011 - 18:37 #8
Hej ronols

Jeg har for en sikkerheds skyld tilføjet values til alle muligheder på listen...

Tak for denne gang.

;o) mcclaud
Avatar billede intenz Novice
23. januar 2011 - 22:55 #9
Ang. din dropdown, så er det typisk smartere at checke efter index, i forhold til value. På den måde kan du ændre i teksten, uden din kode går i stykker.


if (theForm.Udstillinger_Kendskab.selectedIndex == 0 {
  alert("Anfør venligst kendskabet til Picturing Life i feltet: Kendskab til Picturing Life");
  theForm.Udstillinger_Kendskab.focus();
  return (false);
}


Her er 0 så det første element (Kendskab til Picturing Life), 1 er det næste, 2, 3, osv.
Avatar billede mcclaud Nybegynder
24. januar 2011 - 21:26 #10
Tak for den go'e idé intenz... Det er hermed rettet.

:o) mcclaud
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB

Netcompany A/S

Managing Architect

Csis Security Group A/S

Junior Software Engineer

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Cyberdivisionen søger IT-supporter til Lokal IT Servicecenter i Karup

KMD A/S

EDI Specialist til KMD Connect

Politiets Efterretningstjeneste

Fullstack softwareudvikler i PET
Seneste spørgsmål Seneste aktivitet
I går 19:53 installer mange programmer på en gang Af Overgaard1654 i Andet software
I går 17:48 Min hp Officejet pro 7740 skærer det nederste af billedet i word Af rosmarin i Printere
I går 13:13 Batch OCR Af KurtG i Billedbehandling
I går 10:42 AI integreret i Access Af per2edb i Access
04/0409:43 AI google.com Af Peter Olsen i Andre onlineløsninger
White papers
Flere white papers »