Avatar billede kjulius Novice
28. december 2010 - 13:35 Der er 12 kommentarer og
1 løsning

Validering ved submit - ingen ny rendering efter opdatering af properties.

Jeg har en form, hvor der er forskellige felter, der skal overholde forskellige regler. Under submit vil jeg gerne validere rigtigheden af det indtastede. Til det kalder jeg en funktion på formens onSubmit event. Det fungerer sådan set udmærket, hvis jeg bare vil sende en alert.

Men jeg vil i stedet gerne ændre baggrundsfarven i de forkerte felter og sætte fejlteksten i det read-only felt på formen, i stedet for den kluntede metode med at få en alert (message box) op.

Derfor sætter jeg i mit script elementets .classname property til et andet navn, når der er fejl, hvorefter CSS-stylen burde tage sig af sagen, ligesom jeg bruger .value property på et read-only input element på formen til at vise fejlteksten.

Det var i hvert fald teorien. Desværre ser det ikke ud til, at der sker en ny rendering af siden, når der returneres fra onSubmit med en false værdi (som der jo skal, når submitten skal afbrydes).

Hvordan kan jeg få siden til at reagere på de ændrede properties på elementerne?
Avatar billede kjulius Novice
28. december 2010 - 13:40 #1
Yderligere oplysninger:

Det er en XHTML strict side, som vises i IE8.
Avatar billede jakobdo Ekspert
28. december 2010 - 15:12 #2
Du bør godt kunne rette css og værdier uden en ny render.
Det er netop ideen med javascript (eller en af dem).
Måske du skal vise lidt kode ?
Avatar billede jakobdo Ekspert
28. december 2010 - 15:34 #3
Avatar billede kjulius Novice
28. december 2010 - 16:45 #4
Hej jakobdo

Okay, jeg kan godt se, at du har fat i noget af det rigtige. Det med .style.backgroundcolor havde jeg ikke rigtigt fanget. Jeg synes ellers jeg har brugt ubehageligt meget tid på at kigge på DOM modellen på www.w3schcools.com.

Jeg havde tænkt mig at ændre elementets .classname property for på den måde at gennemtvinge ændringen via CSS schema.

Det er måske ikke en acceptabel metode? Hvorfor ikke?

Okay, her er lidt uraffineret, rå og ubehøvlet kode:


VisData.php:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<link rel="stylesheet" type="text/css" href="Revider_stamdata.css" media="screen"/>
<head>
<title>Revider stamdata</title>
<div id="Overskrift">Revider stamdata</div>
<script type="text/javascript" src="Revider_stamdata.js">
</script>

</head>
<body>
<?php
  $vnr = "222322";
  $varenavn = "Iposonit 30 tabl";
  $samlpk=10;
  $grospk=100;
  $hoejde=5;
  $bredde=15;
  $dybde=10;
  $rund='checked';
?>

<div id="formdata">
<form name="stamdata" action="index.php" enctype="text/plain" method="post" onSubmit="return checkform()">
<div class="Varenavn">Vnr.: <?php echo $vnr ?></div>
<div class="Varenavn">Vare: <?php echo $varenavn ?></div>
    <div class="inpdata">Apotekssampak: <?php echo "<input class='inpdata' type='text' name='samlpk' maxlength='7' size='5' onKeyPress='return numbersonly(this, event)' value='".$samlpk."'>"?></div>
    <div class="inpdata">Grossistsampak.: <?php echo "<input class='inpdata' type='text' name='grospk' maxlength='7' size='5' onKeyPress='return numbersonly(this, event)' value='".$grospk."'>"?></div>
    <div class="inpdata">Pakningsstørrelse (HxBxD)</div>
    <div class="inpdata">
    <?php echo "<input type='text' name='hoejde' maxlength='5' size='5' onKeyPress='return numbersonly(this, event)' value='".$hoejde."'>"?>
    <?php echo "<input type='text' name='bredde' maxlength='5' size='5' onKeyPress='return numbersonly(this, event)' value='".$bredde."'>"?>
    <?php echo "<input type='text' name='dybde' maxlength='5' size='5' onKeyPress='return numbersonly(this, event)' value='".$dybde."'>"?>
    </div>
    <div class="inpdata">Rund pakning?<?php echo "<input type='checkbox' name='rund' $rund>"?></div>
    <input type="text" readonly="true" size="35" name="ErrorText" Id="ErrorText">
    <input type="hidden" name="vnr" value="<?php echo $vnr ?>">
    <div class="inpdata"><input type="submit" value="Send">      <input type="reset" value="Annuller"></div>
</form>
</div>
</body>
</html>

Revider_stamdata.js:
//<![CDATA[
function checkform()
{
    var fejl;
    var ErrTxt;
    var FormElems;
    fejl = false;
   
    FormElems = document.forms["stamdata"];
   
    // Tjek at samlpk feltet ikke er 0 (eller blank)...
    if ((document.forms["stamdata"].elements["samlpk"].value == 0) || (document.forms["stamdata"].elements["samlpk"].value == ''))
        {
        document.forms["stamdata"].elements["samlpk"].classname="formerr";
        fejl = true;
        ErrTxt = "Sampak = 0!";
        }
       
    // Tjek at grospk feltet ikke er 0 (eller blank)...   
    if ((document.forms["stamdata"].elements["grospk"].value == 0) || (document.forms["stamdata"].elements["grospk"].value == ''))
        {
        document.forms["stamdata"].elements["grospk"].classname="formerr";
        fejl = true;
        if (ErrTxt == '')
            ErrTxt = "Grospak = 0!";
        else
            ErrTxt = ErrTxt +  ", Grospak = 0!";
        }
       
    // Tjek at grospk feltet ikke er mindre end samlpk feltet...
    if (document.forms["stamdata"].elements["grospk"].value < document.forms["stamdata"].elements["samlpk"].value)
        {
        document.forms["stamdata"].elements["grospk"].classname="formerr";
        document.forms["stamdata"].elements["samlpk"].classname="formerr";
        fejl = true;
        if (ErrTxt == '')
            ErrTxt = "Grospak < Samlpk!";
        else
            ErrTxt = ErrTxt + ", Grospak < Samlpk!";
        }
       
    // Vis en evt. fejlmelding og returner svaret om submit skal gennemføres...
    if (fejl == true)
        {
        //alert(ErrTxt);
        FormElems.elements["ErrorText"].Value = ErrTxt;
        return false;
        }
    else
        return true;
};

// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
  key = window.event.keyCode;
else if (e)
  key = e.which;
else
  return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) ||
    (key==9) || (key==13) || (key==27) )
  return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
  return true;

// decimal point jump
else if (dec && (keychar == "."))
  {
  myfield.form.elements[dec].focus();
  return false;
  }
else
  return false;
};
//]]>

Revider_stamdata.css:
#Overskrift {
    color: blue;
    text-align: left;
    font-family: arial;
    font-size: 16pt;
    font-weight: bold
}
#formdata {
    color: green;
    text-align: left;
    font-family: serif;
    font-size: 10pt;
}
#ErrorText {
    color: red;
    text-align: left;
    font-family: sans-serif;
    font-size: 10pt;
    outline-style: none;
    border-style: none;
}
.Varenavn {
    color: black;
    text-align: left;
    font-family: sans-serif;
}
.inpdata {
    font-style: italic;
}
.formerr {
    background-color: red;
    color: white;
    font-family: serif;
    font-size: 10pt;
    font-weight: bold;
}
Avatar billede jakobdo Ekspert
28. december 2010 - 17:07 #5
Prøv at se min kode nu.
Denne gang gør jeg brug af className.
Så det kan du også godt bruge.
Avatar billede kjulius Novice
28. december 2010 - 17:25 #6
Uhhhg! Det var ligegodt meget! Hvorfor virker din kode så godt, og min så skidt? Så vidt jeg kan se, er der ikke den store forskel, bortset fra adresseringsmåden. Du søger efter en bestemt Id i DOM dokumentet, mens jeg adresserer elementet mere "fra roden". Jeg ville have troet, at det var lige så godt (bedre), men der tager jeg så fejl -- eller ligger ondet begravet et andet sted?
Avatar billede jakobdo Ekspert
28. december 2010 - 17:33 #7
Jeg skal ikke sige om du gør det forkert eller ej.
Men: FormElems = document.forms["stamdata"];
ville jeg jo altid lave ved at smide et ID på formen som f.eks.:

<form id="stamdata" og så:

FormElems = document.getElementById("stamdata");
Men du burde godt kunne gøre som du gør, men måske lidt debug ville kunne hjælpe dig.
Avatar billede kjulius Novice
28. december 2010 - 17:40 #8
Okay, det må jeg prøve at finde ud af.

Men lige før du får dine velfortjente point, kunne du så ikke lige vise mig, at det kan lade sig gøre at vise en fejlmeddelelse i formen på et på forhånd veldefineret sted (i stedet for den "rådne" alert)?
Du virker til at have styr på skidtet, så jeg er ikke bange mere.
Avatar billede jakobdo Ekspert
28. december 2010 - 17:49 #9
Opdater min side.

Og en anden ting.
Overvej evt. at kig lidt på jquery. Det gør nogle ting meget nemmere.
Avatar billede kjulius Novice
28. december 2010 - 18:09 #10
Perfekt! Jeg havde slet ikke tænkt på bare at bruge en div-container. Og .innerHTML property'en havde jeg slet slet ikke i scope.

Jeg har lært rigtigt meget i dag! :o)

Ordet jQuery har jeg ofte set i nyhedsbreve mv., men jeg har ikke sat mig ind i, hvad det kan bruges til. Det lyder nærmest som et forespørgselsværktøj til Java.

God (bag)jul og godt nytår!
Avatar billede kjulius Novice
28. december 2010 - 18:14 #11
Jeg synes lige vi skal offentliggøre dit fungerende eksempel (hvor indtastningsfeltets baggrundsfarve ændres til gul, hvis der ikke er indtastet en tekst):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JS Test</title>
<style type="text/css">
  input.ok{
    background-color: white;
    border: 1px solid black;
  }
  input.error{
    background-color: yellow;
    border: 1px solid green;
  }
</style>
<script type="text/javascript">
  function validate(){
    var myText = document.getElementById("myText").value;
    if(myText.length == 0){
      document.getElementById("myText").className = "error"
      return false;
    }else{
      document.getElementById("myText").className = "ok"
      document.getElementById("myError").innerHTML = "Du har tastet: " + myText;
      return false;
    }
  }
</script>
</head>
<body>
  <form method="post" action="" onsubmit="return validate();">
    <div id="myError">&nbsp;</div>
    <div>Skriv noget: <input class="ok" type="text" id="myText" name="myText" /></div>
    <div><input type="submit" id="mySubmit" name="mySubmit" /></div>
  </form>
</body>
</html>
Avatar billede jakobdo Ekspert
28. december 2010 - 18:27 #12
Takker for point
Avatar billede kjulius Novice
28. december 2010 - 18:42 #13
Helt i orden. Det er billigt for så meget ny viden og hjælp! :o)
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

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