Javascript formulier validatie

Status
Niet open voor verdere reacties.
D

ddayoverlord

Gebruiker
Lid geworden
22 dec 2007
Berichten
15
Beste lezers,

Ik zal wel de zoveelste zijn met een vraag over formvalidatie maar mijn vraag kon ik niet vinden op deze website.
Ik ben nog niet zo lang bezig met javascript, dus de ervaren mensen zullen wel denken.... weer zon nieuweling...... ehh sorry?! :o

Het gaat om het volgende;
Er is een TEXT veld dat heet KNVBNummer, met als standaard waarde N.V.T.
Nu wil ik dat dat veld gecontroleerd wordt of er de waarde N.V.T. in staat enzo niet dan mag de waarde alleen hoofdletters en cijfers bevatten.
Ik ben zover gekomen als hieronder, maar ik kom er niet uit.
Kan iemand mij de oplossing bieden, en beter nog een kleine uitleg geven.
Alvast bedankt!

De code (een deel ervan)

<script language="javascript">
function checkform(form){


form.KNVBNummer.style.backgroundColor='#fee3ad';
if (form.KNVBNummer.value !== "N.V.T.") {
document.forms[0].KNVBNummer.value = document.forms[0].KNVBNummer.value.toUpperCase();
var KNVBNummer = document.forms[0].KNVBNummer.value.toUpperCase();
rExp = /[A-Z0-9]+/g;
if (!rExp.exec(KNVBNummer)){
alert('U heeft het veld KNVBNummer niet juist ingevuld.\nDit is een combinatie van hoofdletters en cijfers');
form.KNVBNummer.focus();
form.KNVBNummer.style.backgroundColor='#FF8080';
return false;
}
return false;
}
return true;
}
</script>
 
Ik heb je code een beetje aangepast... Het kan ook allemaal helemaal anders, maar dit is één van de mogelijkheden!
Om nu alles uit te leggen hoe het in mekaar zit is nogal veel, maar bekijk het eens rustig, en als er iets is dat je niet begrijpt, mag je het gerust vragen;)
En uiteraard ook als het nog niet helemaal doet wat je ervan verwacht:D
HTML: 
<html>
  <head>
    <script language="javascript">
      function checkform(){
        f.KNVBNummer.style.backgroundColor='#fee3ad';
        if (f.KNVBNummer.value !== "N.V.T.") {
          var KNVBNummer = document.f.KNVBNummer.value.toUpperCase();
          document.f.KNVBNummer.value = KNVBNummer;
          rExp = /[A-Z0-9]+/g;
          if (!rExp.exec(KNVBNummer)){
            alert('U heeft het veld KNVBNummer niet juist ingevuld.\nDit is een combinatie van hoofdletters en cijfers');
            f.KNVBNummer.focus();
            f.KNVBNummer.style.backgroundColor='#FF8080';
          }
        }
      }
    </script>
  </head>
  <body>
    <form name='f' action='f.php' method='post'>
      <input type='text' name='KNVBNummer' value='N.V.T.' onblur='checkform();' style='background-color:#FFFFFF'><br>
      <input type='text' name='txt' style='background-color:#FFFFFF'><br>
      <input type='submit' value='Verzend'>
    </form>
  </body>
</html>
 
Beste JHx,

Dank je voor je antwoord, maar het gaat nog niet goed.
Voor de volledigheid, ik gebruik FireFox.

Ik kan nog steeds andere tekens zoals + - * invullen.
Dan gaat ie meteen posten, en niet naar het volgende veld.
Soms krijg ik wel de Alert en soms weer niet.

Ik heb er zelf ook al dagen aan gespandeerd en van alles geprobeerd en vergeleken met andere voorbeelden en nog steeds kom ik er niet uit!:(

groetjes
ddayoverlord
 
Tja... Ik heb zelf geen FireFox geïnstalleerd, en kan het dus niet testen. Ik weet wel dat FireFox veel strikter is met standaard-normen en zo dan IE.

Heb je mijn voorbeeldje ook "onveranderd" getest? Of heb je enkel in jou bestand aanpassingen gedaan zodat het meer op mijn voorbeeld lijkt? Als dat het geval is, geef dan eens jou volledige code, dus niet alleen het scriptje, maar ook het HTML-gedeelte met de <form...>-tags
 
THx,

Je code heb ik 1 op 1 overgenomen, niets aangepast.
Een test in IE zal ik ook even doen.
Ik zal je morgen de HTML en de JS aanleveren.

Thanks in advance!

ddayoverlord
 
Ik denk dat ik het euvel gevonden heb!!!
Het probleem zit in de "Regular Expression". De code die ik voordien gegeven heb, kontroleert ALLEEN het eerste karakter. Wel vrij dom van mij dat ik dat niet beter getest heb:o.
Hier heb ik wat meer info over het onderwerp gevonden.
Wat ik nu nog moet weten is hoe het "masker" voor het KNVB-nummer er precies uitziet. Heeft het altijd de zelfde lengte (hoeveel karakters zijn mogelijk?), en kan er op elke positie zowel een letter als cijfer staan?
In onderstaand voorbeeld moeten 6 of 7 karakters ingevuld worden; op elke positie mag zowel een letter als een cijfer staan. Indien helemaal leeg, wordt terug "N.V.T." ingevuld. Alle andere gevallen geeft een foutmelding. De kontrole gebeurt op het ogenblik dat het tekstvak "KNVB-Nummer" verlaten wordt.

PHP: 
<html>
  <head>
    <script language="javascript">
      function checkform(){
        document.f.KNVBNummer.style.backgroundColor='#fee3ad';
        var sKNVB = document.f.KNVBNummer.value.toUpperCase();
        document.f.KNVBNummer.value = sKNVB;
        if (sKNVB !== "N.V.T.") {
          if(sKNVB == ""){
            document.f.KNVBNummer.value = "N.V.T.";
          }else{
            rExp1 = /^[A-Z0-9]{6}$/;
            rExp2 = /^[A-Z0-9]{7}$/;
            if ((!sKNVB.match(rExp1)) && (!sKNVB.match(rExp2))){
              alert('U heeft het veld KNVB-Nummer niet juist ingevuld.\nDit is een combinatie van hoofdletters en cijfers');
              document.f.KNVBNummer.focus();
              document.f.KNVBNummer.style.backgroundColor='#FF8080';
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <form name='f' action='f.php' method='post'>
      <table>
        <tr>
          <td align='right'>KNVB-Nummer:</td>
          <td><input type='text' name='KNVBNummer' value='N.V.T.' onblur='checkform();' style='background-color:#FFFFFF'></td>
        </tr>
        <tr>
          <td align='right'>Iets anders:</td>
          <td><input type='text' name='txt' style='background-color:#FFFFFF'></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align='center'><input type='submit' value='Verzend'></td>
        </tr>
      </table>
    </form>
  </body>
</html>
Ben eens benieuwd of het hiermee zal lukken...:rolleyes:
 
Beste THx,

Ik ben eruit:):):):)
Thanks voor je hulp.
Ik denk inderdaad dat je aan moet geven hoeveel karakters het moeten zijn, nu op minimaal 7 en maximaal 10 gezet.
Een test op andere mogelijkheden moet ik nog doen.
Maar voorlopig werkt ie zoals het moet!
Dit moet het zijn om in IE en in FF te werken;

HTML: 
<html>
  <head>
    <script language="javascript">
      function checkform(form){
	form.KNVBNummer.style.backgroundColor='#fee3ad';
    if (form.KNVBNummer.value !== "N.V.T.") {
		document.forms[0].KNVBNummer.value = document.forms[0].KNVBNummer.value.toUpperCase();
    	var KNVBNummer = document.forms[0].KNVBNummer.value.toUpperCase();
			rExp = /^[A-Z0-9]{7,10}$/;
			if (!rExp.exec(KNVBNummer)) {
			alert('U heeft het veld KNVBNummer niet juist ingevuld.\nDit is een combinatie van minimaal 7 hoofdletters en cijfers');
	   		form.KNVBNummer.focus();
     		form.KNVBNummer.style.backgroundColor='#FF8080';
		   	return false;
			}
       	}
       	return true;
   	}

</script>
  </head>
  <body>
    <form name='adduser' action='f.php' method='post' onsubmit="return checkform(this)" enctype="multipart/form-data">
      <table>
        <tr>
          <td align='right'>KNVB-Nummer:</td>
          <td><input type='text' name='KNVBNummer' value='N.V.T.'></td>
        </tr>
        <tr>
          <td align='right'>Iets anders:</td>
          <td><input type='text' name='txt' style='background-color:#FFFFFF'></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align='center'><input type='submit' value='Verzend'></td>
        </tr>
      </table>
    </form>
  </body>
</html>

Groetjes,

ddayoverlord
 
Ziet er netjes uit! En, belangrijker nog. het werkt! :thumb:

Groetjes,
JHx.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan