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.
Annonceindlæg fra Computerworld
Open Source AI er på vej ind i kommunerne
Med OS2ai forsøger Aarhus Kommune og OS2-fællesskabet at give offentlige medarbejdere adgang til generativ AI uden at gøre kommunerne mere afhængige af amerikanske techgiganter.
20. oktober 2005 - 16:23
#1
Skal det laves generisk, så antallet af felter kan variere ?-)
20. oktober 2005 - 16:29
#2
Ja - det ville klart være det bedste.
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>
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å...
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 ?-)
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.
20. oktober 2005 - 17:22
#8
Hov - den havde jeg ikke set.
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.
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>
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");
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?
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>
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;">
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?
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?
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>
24. oktober 2005 - 12:37
#18
Hej Roenving - mange tak for hjælpen, du har fuldt ud fortjent pointene. Opret venligst et svar.
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=
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 '-)
24. oktober 2005 - 13:12
#21
En stor tak til jer begge! Dette viser endnu en gang, at Eksperten er stedet hvor det sker :)
24. oktober 2005 - 13:13
#22
Det er fortjent
24. oktober 2005 - 13:14
#23
Tak for point ;~}
24. oktober 2005 - 13:14
#24
Hov - Den avancerede point deling, virker da vist ikke :( Men som skrevet i har begge fortjent dem
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æt" width="60" height="21" style="cursor:hand;" onclick="document.frm.submit();" /> Kan det være derfor?
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æt" width="60" height="21" style="cursor:hand;" onclick="if(valider(document.frm))document.frm.submit();" />
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.
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"
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"> </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"> </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"> </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"> </td> </tr> <tr> <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Formå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"> </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"> </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"> </td> </tr> <tr> <td width="130" height="30" align="left" valign="top" class="tableContent" scope="row"><strong>Må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"> </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"> </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"> </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"> </td> </tr>
Vi tilbyder markedets bedste kurser inden for webudvikling