[HTML & JS] FF wil geen border om een input box zetten

[NS_5]

Ik heb een pagina een formulier die je moet invullen zodat de gegevens in een DB komen.
Onderaan het formulier staat een knop die heeft een onclick() die zorgt
dat er een javascript functie word aangeroepen die het formuleer controleerd.
Als java een fout vind zet ie er een rode rand omheen.

Probleem is dat FF geen rode border maakt IE doet dat wel

Aan het input boxje zit al een CSS vast die maakt de border zwart voor de de lay-out.

hier de code:

JavaScript:

function check_form(){
if (form.naam.value == "" ){ form.naam.style.border="1px solid #FF0000"; }else{ form.naam.style.border="1px solid #00DD00"; }
if (form.achternaam.value == "" ){ form.achternaam.style.border="1px solid #FF0000"; }else{ form.achternaam.style.border="1px solid #00DD00"; }

HTML:

<table width="600" border="0" cellpadding="0" cellspacing="0" class="Black">
    <tr>
      <td colspan="4" class="white" background="Images/cell.png"><div align="center">Gegevens Toevoegen </div></td>
    </tr>
    <tr bgcolor="#F1F1F1">
      <td width="99">Naam: </td>
      <td width="200"><input name="naam" type="text" id="naam" class="Black"></td>
      <td width="99">Achternaam: </td>
      <td width="200"><input name="achternaam" type="text" class="Black" id="achternaam"></td>
    </tr>
</table>

[ Voor 47% gewijzigd door NS_5 op 21-05-2006 17:39 ]

[We Are Borg]

Nu ben ik geen held met JS, maar ik weet dat "form.naam.style.border" erg IE-only aan doet Er is een betere notatie voor.

[ Voor 7% gewijzigd door We Are Borg op 21-05-2006 17:38 ]

[NS_5]

zo snel

Ik dacht als zoiets dat FF die regel niet snapt maar wat kun je dus i.p.v. dat gebruiken?

Ik heb zelf ook al wat rond gekeken maar krijg je van die dingen als:
-moz-border-left-colors bla bla bla.

[ Voor 3% gewijzigd door NS_5 op 21-05-2006 17:43 ]

[Patriot]

Het inputveld een id meegeven, en document.getElementById(id).style gebruiken

[We Are Borg]

NS_5 schreef op zondag 21 mei 2006 @ 17:42:
zo snel

Ik dacht als zoiets dat FF die regel niet snapt maar wat kun je dus i.p.v. dat gebruiken?

Wat timmie_loots dus zegt. Meestal, no offence voor IE of jou, kan je beter FF aanhouden. Als het daarin niet werkt, doe je het fout. Dat jouw voorbeeld werkt in IE heeft niks te maken met kwaliteit van de browser

[NS_5]

timmie_loots schreef op zondag 21 mei 2006 @ 17:43:
Het inputveld een id meegeven, en document.getElementById(id).style gebruiken

nee werk ook niet

We Are Borg schreef op zondag 21 mei 2006 @ 17:45:
[...]
Wat timmie_loots dus zegt. Meestal, no offence voor IE of jou, kan je beter FF aanhouden. Als het daarin niet werkt, doe je het fout. Dat jouw voorbeeld werkt in IE heeft niks te maken met kwaliteit van de browser

Ja ik ben heilig FireFox gebruiker haha

ik ga er ook van uit dat FF het goed heeft hoor
IE wijkt ontzettend af van de richtlijnen

[Borizz]

Misschien dat de property borderColor wel werkt..

JavaScript:

element.style.borderColor = 'red';

Verder kan je in Firefox de Javascript console openen om te kijken of er fouten in je script zitten.

[Patriot]

NS_5 schreef op zondag 21 mei 2006 @ 17:49:
[...]

nee werk ook niet

Dat moet gewoon werken, heb het net nog uitgeprobeerd...

[NS_5]

timmie_loots schreef op zondag 21 mei 2006 @ 18:42:
[...]
Dat moet gewoon werken, heb het net nog uitgeprobeerd...

Bij mij niet ik gebruik FF 1.5

maar je bedoeld toch:
document.getElementById("naam").style.border="1px solid #FF0000";
right? Werkt wel in IE maar niet in FF

[ Voor 9% gewijzigd door NS_5 op 21-05-2006 18:48 ]

[Patriot]

Dat bedoel ik inderdaad, maar je volgorde klopt niet.

Het is [kleur] [breedte] [solid/dashed etc.], dat werkt wel bij mij.

EDIT: Hmm, werkt beide bij mij trouwens.

[ Voor 17% gewijzigd door Patriot op 21-05-2006 19:19 . Reden: Extra info ]

[NS_5]

timmie_loots schreef op zondag 21 mei 2006 @ 19:07:
Dat bedoel ik inderdaad, maar je volgorde klopt niet.

Het is [kleur] [breedte] [solid/dashed etc.], dat werkt wel bij mij.

Werk ook niet
Jemig ik had em inderdaad verkeerd gedaan. dom dom dom

Maar dreamweaver steld voor [breedte] [solid/dashed etc.] [kleur] werkt overigens ook niet
En Jou manier ook al niet

[Verwijderd]

Waarom maak je niet een css class aan en ken je deze toe met JavaScript?

code:

<style type="text/stylesheet" media="all">
.rodeRand{
 border: 1px solid red;
}
</style>

En bijbehorend javascript:

code:

<script type="text/javascript">
document.getElementById('objectID').className = 'rodeRand';
</script>

[Patriot]

Ik snap het echt niet hoor, mijn manier werkt gewoon bij mij.

Ik gebruik btw FF 1.5.0.3

[Verwijderd]

Verwijderd schreef op zondag 21 mei 2006 @ 19:18:
Waarom maak je niet een css class aan en ken je deze toe met JavaScript?

Omdat dat trager is.

De properties los opgeven is het veiligst. Dus .style.borderColor, .style.borderStyle en style.borderWidth

[Verwijderd]

mja, hoeveel trager zou het zijn vraag ik me af?
Maar wat jij voorstel is al beter dan die gecombineerde '1px solid red' toekennen met JavaScript.

Een de andere kant is er ook weer wat voor te zeggen om het met een class te doen.
Nu wil ie alleen een rode rand. Later wil men misshien er een blauwe gestippelde rand en een achtergrond- en tekstkleur en een ander font aan toekennen. Dan is een class toch weer wat onderhoudsvriendelijker en hoef je niet in je functie zelf dingen aan te passen, slechts op 1 plaats in je css.

[ Voor 58% gewijzigd door Verwijderd op 21-05-2006 19:23 ]

[Patriot]

Erg veel trager zal het niet zijn, maar het gaat wel om het idee.

Verder vind ik het heel gek dat de TS aangeeft dat mijn manier niet werkt, aangezien het bij mij wel gewoon werkt. Weet de TS zeker dat er geen andere oorzaak is?

EDIT:

Oh kom op, ik mag toch hopen dat de topicstarter ook zijn if-statement heeft aangepast?

Dus zo:

code:

<script type="text/javascript">
function checkform()
{
    
    if(document.getElementById('naam').value == "") {
        document.getElementById('naam').style.border = "1px solid #FF0000";
    } else {
        document.getElementById('naam').style.border = "1px solid #00DD00";
    }
    
    if(document.getElementById('achternaam').value == "") {
        document.getElementById('achternaam').style.border = "1px solid #FF0000";
    } else {
        document.getElementById('achternaam').style.border = "1px solid #00DD00";
    }
}
</script>

[ Voor 59% gewijzigd door Patriot op 21-05-2006 19:27 ]

[Verwijderd]

Verwijderd schreef op zondag 21 mei 2006 @ 19:21:
mja, hoeveel trager zou het zijn vraag ik me af?
Maar wat jij voorstel is al beter dan die gecombineerde '1px solid red' toekennen met JavaScript.

Een de andere kant is er ook weer wat voor te zeggen om het met een class te doen.
Nu wil ie alleen een rode rand. Later wil men misshien er een blauwe gestippelde rand en een achtergrond- en tekstkleur en een ander font aan toekennen. Dan is een class toch weer wat onderhoudsvriendelijker en hoef je niet in je functie zelf dingen aan te passen, slechts op 1 plaats in je css.

Dat ben ik wel met je eens, en het is ook afhankelijk van hoe snel en hoe vaak de border moet wijzigen. Als het bijvoorbeeld maar eenmalig is zal het niet zoveel uitmaken. Maar als je in een groot document vlug met classNames gaat schuiven, wil het nog weleens traag worden.

[Verwijderd]

Ah ok, dat wist ik eerlijk gezegd niet, weer wat geleerd

[NS_5]

Jahoor Geniaal

Hij doet het
Ligt het er nou echt aan dat ik form.naam gebruik ipv document.getElementById

nou bedankt allemaal!!

[Patriot]

Ja, daar ligt het inderdaad aan, daar kan FF niet echt mee overweg.

document.forms['formnaam'].elements['veldnaam'] werkt wel in Firefox geloof ik.

offtopic:
Even je sig veranderen, die klopt niet echt

[NS_5]

hahaha was net mijn sig aant veranderen (dus nog voor je post)

haha

[funkwurm]

Om het verhaal compleet te maken, in IE kunnen elementen uit de lucht komen vallen door gewoon form.iets te tikken (ik neem hierbij aan dat je <form>-tag ook name="form" heeft). Maar normaal gesproken moet je wel aangeven dat form een child-object is van document.

Kort gezegd, als je

JavaScript:

function check_form(){
if (form.naam.value == "" ){ form.naam.style.border="1px solid #FF0000"; }else{ form.naam.style.border="1px solid #00DD00"; }
if (form.achternaam.value == "" ){ form.achternaam.style.border="1px solid #FF0000"; }else{ form.achternaam.style.border="1px solid #00DD00"; }

had veranderd in

JavaScript:

function check_form(){
if (document.form.naam.value == "" ){ document.form.naam.style.border="1px solid #FF0000"; }else{ document.form.naam.style.border="1px solid #00DD00"; }
if (document.form.achternaam.value == "" ){ document.form.achternaam.style.border="1px solid #FF0000"; }else{ document.form.achternaam.style.border="1px solid #00DD00"; }

heb je ook nog best kans dat het werkt in FF en Opera

[crisp]

het name-attribuut voor een formulier is achterhaald en meestal is een ID ook overbodig omdat je een form-check functie vanuit de onsubmit handler van je form dient aan te roepen en je dan meteen een referentie naar je formulier kan meegeven:

HTML:

<form ... onsubmit="return check_form(this)">

JavaScript:

function check_form(form)
{
  if (form.elements['naam'].value == '')
  {
    form.elements['naam'].style.border = '1px solid red';
    return false;
  }
  // etcetera

  // alle checks gedaan, geen fouten dus laat de submit maar doorgaan
  return true;
}

Overigens is een className swap hier beter op z'n plek; style hoort in CSS te zitten en niet in script:

Cascading Stylesheet:

input.error {
  border: 1px solid red;
}

JavaScript:

  if (form.elements['naam'].value == '')
  {
    form.elements['naam'].className = 'error';
    return false;
  }

[Patriot]

In XHTML mág de form tag niet eens een name attribuut bevatten.

[crisp]

timmie_loots schreef op zondag 21 mei 2006 @ 22:28:
In XHTML mág de form tag niet eens een name attribuut bevatten.

Dat klopt en heeft een reden: http://www.w3.org/TR/xhtml1/#h-4.10

offtopic:
maar XHTML zelf is ook achterhaald

[ Voor 3% gewijzigd door crisp op 22-05-2006 00:36 ]