Avatar billede wolfgang Praktikant
20. oktober 2005 - 14:59 Der er 26 kommentarer og
3 løsninger

Validering - status med billede

Hej,
Jeg søger hjælp til et valideringsscript, med følgende egenskaber.
- Det skal virke på flere felter i samme form.

Hvis et felt har flere end 3 tegn og mindre tegn end angivet i valideringsscriptet, vises et OK-billede.

Hvis et felt har flere tegn end tilladt/angivet i valideringsscriptet, vises et NoGo-billede.

Hvis feltet er tomt, skal intet billede være synligt.

Glæder mig til at høre fra jer.
Avatar billede roenving Novice
20. oktober 2005 - 16:23 #1
Skal det laves generisk, så antallet af felter kan variere ?-)
Avatar billede wolfgang Praktikant
20. oktober 2005 - 16:29 #2
Ja - det ville klart være det bedste.
Avatar billede horsmark Nybegynder
20. oktober 2005 - 16:37 #3
<html>
<body>
<script type="text/javascript">

    var aInputIds = new Array("test1","test2","test3")

    function validate(){
        var ele
        var img = document.getElementById('image')
        var alertMsg = ""
        for( var i = 0; i < aInputIds.length; i++ ){
            ele = document.getElementById(aInputIds[i])
            if( ele.value.length < 3 ) alertMsg += "Feltet " + aInputIds[i] + " skal være minimum 3 tegn langt\n"
        }
        if( alertMsg != "" ){
            alert(alertMsg)
            img.src = "http://exp.dk/img/elogo.png"
            return false
        } else {
            img.src = "http://www.horsmark.com/sitemark/_local/171.jpg"
            return true
        }
    }
   
</script>

<img id="image">
<form onSubmit="return validate()">
    <input type="text" id="test1">
    <input type="text" id="test2">
    <input type="text" id="test3">
    <input type="submit" value="gem">
</form>
</body>
</html>
Avatar billede horsmark Nybegynder
20. oktober 2005 - 16:38 #4
Ovenstående skal nok udbygges lidt ;-) ...men det var blot for at vise en måde at gøre det på...
Avatar billede roenving Novice
20. oktober 2005 - 16:49 #5
Ja, det har du da nok ret i !-)

-- som jeg havde forstået det, så ville du have et billede til hver input ?-)
Avatar billede horsmark Nybegynder
20. oktober 2005 - 17:21 #6
jajajaj roenving så får jeg som fortjent igen af dig ;-)

Har udbygget og indskærnket funktionen lidt...

<html>
<body>

<form onSubmit="return validate()">
    <input type="text" id="test1" onkeyup="validate()" onkeydown="validate()" onChange="validate()" onBlur="validate()"><img id="img_test1" src="http://www.sitemark.net/sitemark/system/graphics/1x1_transperant.gif"><br>
    <input type="text" id="test2" onkeyup="validate()" onkeydown="validate()" onChange="validate()" onBlur="validate()"><img id="img_test2" src="http://www.sitemark.net/sitemark/system/graphics/1x1_transperant.gif"><br>
    <input type="text" id="test3" onkeyup="validate()" onkeydown="validate()" onChange="validate()" onBlur="validate()"><img id="img_test3" src="http://www.sitemark.net/sitemark/system/graphics/1x1_transperant.gif"><br>
    <input id="submit" type="submit" value="gem">
</form>

<script type="text/javascript">

    var aInputIds = new Array("test1","test2","test3")
    var imgEmpty = new Image()
    imgEmpty.src    = "http://www.sitemark.net/sitemark/system/graphics/1x1_transperant.gif"
    var imgValid = new Image()
    imgValid.src = "http://www.sitemark.net/sitemark/system/graphics/plus.gif"
    var imgInvalid = new Image()
    imgInvalid.src = "http://www.sitemark.net/sitemark/system/graphics/minus.gif"
    var minInputLength = 3
    var maxInputLength = 10
   
    function validate(){
        var item
        var isFormValid = true
        for( var i = 0; i < aInputIds.length; i++ ){
            item = document.getElementById( aInputIds[i] )
            if( item.value == ""){
                isFormValid = false               
                document.getElementById('img_'+item.id).src = imgEmpty.src
                continue
            }
            if( item.value.length < minInputLength || item.value.length > maxInputLength){
                isFormValid = false
                document.getElementById('img_'+item.id).src = imgInvalid.src
                continue
            }
            document.getElementById('img_'+item.id).src = imgValid.src
        }
        var btnSubmit = document.getElementById('submit')
        isFormValid ? btnSubmit.disabled = false : btnSubmit.disabled = true;
    }
    validate()
</script>
</body>
</html>
Avatar billede wolfgang Praktikant
20. oktober 2005 - 17:21 #7
Ja, der skal være et billede for hver input felt.
Jeg vil tro at der skal en eller anden form for tæller til, at "overvåge" hvornår at valideringsregler er opfyldt.

Håber at det kan hjælpe med at beskrive udfordringen.
Avatar billede wolfgang Praktikant
20. oktober 2005 - 17:22 #8
Hov - den havde jeg ikke set.
Avatar billede wolfgang Praktikant
20. oktober 2005 - 17:25 #9
Hej horsmark,
Det er noget ala det jeg havde tænkt mig.

I stedet for at have minInputLength & maxInputLength defineret i scriptet, skal det kunne defineres for hvert af felterne. De kræver jo ikke den samme validering.
Avatar billede roenving Novice
20. oktober 2005 - 17:31 #10
Tjah, så ville jeg lave det sådan at input og billeder havde et id, som var sammenligneligt, f.eks.

<input type="text" name="test1" id="test1" onkeyup="visGo(this);"><img id="test1Pic" src="NoGo.gif" style="visibility:hidden;">

-- og en funktion:

<script type="text/javascript">
var maxLength = 30;
function visGo(elm){
  var pic = document.getElementById(elm.id + "Pic");
  var l = elm.value.length;
  if(l == 0)
    pic.style.visibility = "hidden";
  else if(l < 3){
    pic.src = "NoGo.gif";
    pic.style.visibility = "visible";
  }else if(l < maxLength){
    pic.src = "GoOk.gif";
    pic.style.visibility = "visible";
  }else
    pic.src = "NoGo.gif";
    pic.style.visibility = "visible";
  }
}
</script>
Avatar billede roenving Novice
20. oktober 2005 - 17:32 #11
-- og al valideringen skal selvfølgelig foregå i en selvstændig funktion ...

-- og hvis det skal være forskelligt, så:

<input type="text" name="test1" id="test1" onkeyup="visGo(this,30);"><img id="test1Pic" src="NoGo.gif" style="visibility:hidden;">

-- og

<script type="text/javascript">
function visGo(elm, maxLength){
  var pic = document.getElementById(elm.id + "Pic");
Avatar billede wolfgang Praktikant
21. oktober 2005 - 09:12 #12
Hej Roenving, Da jeg ikke er helt skarp til dette, mangler jeg lige lidt overblik.

Vil du samle dine forslag til en samlet løsning?
Avatar billede roenving Novice
22. oktober 2005 - 04:49 #13
Tjoh, men den er jo ikke så svær at tilpasse:

<input type="text" name="test1" id="test1" onkeyup="visGo(this,30);"><img id="test1Pic" src="NoGo.gif" style="visibility:hidden;">
<input type="text" name="test2" id="test1" onkeyup="visGo(this,10);"><img id="test2Pic" src="NoGo.gif" style="visibility:hidden;">
<input type="text" name="test3" id="test1" onkeyup="visGo(this,100);"><img id="test3Pic" src="NoGo.gif" style="visibility:hidden;">


-- og en funktion:

<script type="text/javascript">
function visGo(elm, maxLength){
  var pic = document.getElementById(elm.id + "Pic");
  var l = elm.value.length;
  if(l == 0)
    pic.style.visibility = "hidden";
  else if(l < 3){
    pic.src = "NoGo.gif";
    pic.style.visibility = "visible";
  }else if(l < maxLength){
    pic.src = "GoOk.gif";
    pic.style.visibility = "visible";
  }else
    pic.src = "NoGo.gif";
    pic.style.visibility = "visible";
  }
}
</script>
Avatar billede roenving Novice
22. oktober 2005 - 04:51 #14
Hov, id skal selvfølgelig også være forskellig på inputs !-)

<input type="text" name="test1" id="test1" onkeyup="visGo(this,30);"><img id="test1Pic" src="NoGo.gif" style="visibility:hidden;">
<input type="text" name="test2" id="test2" onkeyup="visGo(this,10);"><img id="test2Pic" src="NoGo.gif" style="visibility:hidden;">
<input type="text" name="test3" id="test3" onkeyup="visGo(this,100);"><img id="test3Pic" src="NoGo.gif" style="visibility:hidden;">
Avatar billede wolfgang Praktikant
23. oktober 2005 - 20:58 #15
Hej Roenving, Beklager den lange svartid.
Jeg har desværre været optaget andetsteds i denne weekend.

Jeg har nu afprøvet scriptet, som desværre melder fejl.
Fejlen opstår efter første key-release.

<script type="text/javascript">
function ValidateInput(elm, maxLength){
  var pic = document.getElementById(elm.id + "Pic");
  var l = elm.value.length;
  if(l == 0)
    pic.style.visibility = "hidden";
  else if(l < 3){
    pic.src = "/_Images/Icons/NoGo.gif";
    pic.style.visibility = "visible";
  }else if(l < maxLength){
    pic.src = "/_Images/Icons/GoOk.gif";
    pic.style.visibility = "visible";
  }else
    pic.src = "/_Images/Icons/NoGo.gif";
    pic.style.visibility = "visible";
  }
}
</script>

<input name="DataField_01" type="text" class="frmTextField" id="DataField_01" size="60" onkeyup="ValidateInput(this,10);" /><img src="_Images/Icons/NoGo.gif" name="DataField_01Pic" align="top" id="DataField_01Pic" style="visibility:visible; margin-top:3px;" />

Har jeg fejlet her?
Avatar billede wolfgang Praktikant
24. oktober 2005 - 10:17 #16
Hej,
Har netop testet/rettet lidt igen og det melder stadigvæk fejl :(

Så snart at jeg slipper den første tast fremkommer scriptfejlen. "Et objekt var ventet".

Er der tale om at jeg har en forkert navngivning?
Avatar billede roenving Novice
24. oktober 2005 - 11:59 #17
Der mangler en tuborg !-|

    pic.style.visibility = "visible";
  }else{
    pic.src = "/_Images/Icons/NoGo.gif";
    pic.style.visibility = "visible";
  }
}
</script>
Avatar billede wolfgang Praktikant
24. oktober 2005 - 12:37 #18
Hej Roenving - mange tak for hjælpen, du har fuldt ud fortjent pointene.

Opret venligst et svar.
Avatar billede wolfgang Praktikant
24. oktober 2005 - 12:49 #19
Et tillægsspørgsmål (Sig venligst hvis det skal oprettes som et nyt spørgsmål.)

Hvordan kan jeg efterfølgende forhindre brugeren i at sende formularen, hvis nogle af felterne ikke er udfyldt korrekt=
Avatar billede roenving Novice
24. oktober 2005 - 13:09 #20
Der tilføjer du en validering i et script ved siden af !-)

-- og for at det skal blive funktionelt kan du f.eks. tilføje en klasse mere til de inputs, der skal valideres for længde:

<form action=" ... " method="post" onsubmit="return valider(this)">

...

<input name="DataField_01" type="text" class="frmTextField val10" id="DataField_01" size="60" onkeyup="ValidateInput(this,10);">
<img src="_Images/Icons/NoGo.gif" name="DataField_01Pic" align="top" id="DataField_01Pic" style="visibility:visible; margin-top:3px;">

...

</form>

-- i validerings-scriptet hiver du så den ekstra klasse ud, hvis den er der !-)

F.eks.

function valider(f){
  var e = f.elements;
  for(i=0;e.length>i;i++){
    if(e[i].type == "text"){
      if(e[i].className.match("val")){
        var num = + e[i].className.replace(/^.*?val(\d+)\b.*$/i,"$1");
        if(e[i].value.length < 3 || e[i].value.length > num){
          alert("Feltet opfylder ikke betingelserne, det er enten for kort eller for langt !-)");
          e[i].focus();
          return false;
        }
      }
    }
  }
  return true;
}

-- og den skal så også ind i script-blokken !o]

-- og du har kastet alt for mange point ind i spørgsmålet, f.eks. 60 ville være rimeligt, og de skal så også deles med horsmark, som jo bestemt også har ydet en indsats !-)

-- så lav også selv et svar, og fordel nogle af pointene mellem horsmark og mig, og behold så selv resten (Tryk på avanceret !-)

-- els velbekomme '-)
Avatar billede wolfgang Praktikant
24. oktober 2005 - 13:12 #21
En stor tak til jer begge!

Dette viser endnu en gang, at Eksperten er stedet hvor det sker :)
Avatar billede wolfgang Praktikant
24. oktober 2005 - 13:13 #22
Det er fortjent
Avatar billede roenving Novice
24. oktober 2005 - 13:14 #23
Tak for point ;~}
Avatar billede wolfgang Praktikant
24. oktober 2005 - 13:14 #24
Hov - Den avancerede point deling, virker da vist ikke :(
Men som skrevet i har begge fortjent dem
Avatar billede wolfgang Praktikant
24. oktober 2005 - 14:50 #25
Hej igen,
Validerings funktionen bliver ignoreret.

<form id="frm" name="frm" method="post" action="?GlobalFunction=CreateCourse&CatalogID=<%= request.QueryString("CatalogID")%>" onsubmit="return valider(this)">

Jeg submitter således: <img src="./_Images/bt_forsaet_0.gif" alt="Fors&aelig;t" width="60" height="21" style="cursor:hand;" onclick="document.frm.submit();" />

Kan det være derfor?
Avatar billede roenving Novice
24. oktober 2005 - 14:55 #26
Ja !-)

-- for onsubmit-eventet bliver ikke udført med .submit() ...

Sådan, så:

<form id="frm" name="frm" method="post" action="?GlobalFunction=CreateCourse&CatalogID=<%= request.QueryString("CatalogID")%>">

Jeg submitter således: <img src="./_Images/bt_forsaet_0.gif" alt="Fors&aelig;t" width="60" height="21" style="cursor:hand;" onclick="if(valider(document.frm))document.frm.submit();" />
Avatar billede wolfgang Praktikant
24. oktober 2005 - 18:53 #27
Hej igen - det bliver bedre og bedre, men...

Hver gang, at dette felt (Nr. 2 i rækken) er udfyldt, sprænges resten af felterne over.

<input name="DataField_02" type="text" class="frmTextField val10" id="DataField_02" size="60" onkeyup="ValidateInput(this,10);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';" />

Det virker meget mystisk.
Avatar billede roenving Novice
24. oktober 2005 - 18:57 #28
Bemærk

class="frmTextField val10"

-- for den anden klasse styrer om det testes af for længde, her er det længden 10, der testes, den skal se således ud, hvis den skal testes for 50 tegn:

class="frmTextField val50"
Avatar billede wolfgang Praktikant
24. oktober 2005 - 19:03 #29
Hmm... Det skulle være kodet rigtigt nok. Her kommer der lige en ordenlig omgang kode:

<tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Titel:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><input name="DataField_01" type="text" class="frmTextField val60" id="DataField_01" size="60" onkeyup="ValidateInput(this,60);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';" /><img src="_Images/Icons/NoGo.gif" alt="60 tegn" name="DataField_01_Pic" align="top" id="DataField_01_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>SIS nr.: </strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><input name="DataField_02" type="text" class="frmTextField val10" id="DataField_02" size="60" onkeyup="ValidateInput(this,10);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';" /><img src="_Images/Icons/NoGo.gif" alt="10 tegn" name="DataField_02_Pic" align="top" id="DataField_02_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Periode</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_03" cols="80" class="frmTextAreaAlt1 val150" id="DataField_03" onkeyup="ValidateInput(this,150);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="150 tegn" name="DataField_03_Pic" align="top" id="DataField_03_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Tid:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_04" cols="80" class="frmTextAreaAlt1 val50" id="DataField_04" onkeyup="ValidateInput(this,50);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="50 tegn" name="DataField_04_Pic" align="top" id="DataField_04_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Form&aring;l:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_05" cols="80" class="frmTextAreaAlt2 val3000" id="DataField_05" onkeyup="ValidateInput(this,3000);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="3000 tegn" name="DataField_05_Pic" align="top" id="DataField_05_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Indhold:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_06" cols="80" class="frmTextAreaAlt2 val3000" id="DataField_06" onkeyup="ValidateInput(this,3000);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="3000 tegn" name="DataField_06_Pic" align="top" id="DataField_06_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Underviser:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_07" cols="80" class="frmTextAreaAlt1 val255" id="DataField_07" onkeyup="ValidateInput(this,255);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="255  tegn" name="DataField_07_Pic" align="top" id="DataField_07_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>M&aring;lgruppe:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_08" cols="80" class="frmTextAreaAlt1 val255" id="DataField_08" onkeyup="ValidateInput(this,255);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="255  tegn" name="DataField_08_Pic" align="top" id="DataField_08_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Pris:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_09" cols="80" class="frmTextAreaAlt1 val255" id="DataField_09" onkeyup="ValidateInput(this,255);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="255  tegn" name="DataField_09_Pic" align="top" id="DataField_09_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Tilmelding:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_10" cols="80" class="frmTextAreaAlt1 val255" id="DataField_10" onkeyup="ValidateInput(this,255);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="255  tegn" name="DataField_10_Pic" align="top" id="DataField_10_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
    <tr>
      <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Sted:</strong></td>
      <td height="30" align="left" valign="top" class="tableContent" scope="row"><textarea name="DataField_11" cols="80" class="frmTextAreaAlt1 val255" id="DataField_11" onkeyup="ValidateInput(this,255);" onblur="this.style.border='2px inset';" onfocus="this.style.border='2px solid #405B99';"></textarea><img src="_Images/Icons/NoGo.gif" alt="255  tegn" name="DataField_11_Pic" align="top" id="DataField_11_Pic" style="visibility:hidden; margin-top:3px;margin-left:3px;" /></td>
      <td width="130" align="left" valign="top" class="tableContent" scope="row">&nbsp;</td>
    </tr>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester