Avatar billede Malika Nybegynder
05. april 2011 - 16:52 Der er 13 kommentarer og
1 løsning

Form validation

Hej

Jeg har en form, jeg bruger javascript til at validere den. Hvis valideringen mislykkes, vises der en fejlmeddelelse vha alert("message");

Men jeg ønsker at vise fejlmeddelsen i form af tekst på selve siden i stedet for alert box.

ex: www.hotmail.com

Jeg har været ind på w3schools, men kunne ikke bruge det til noget.




<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm()
{
var x= document.forms["myForm"] ["firstname"].value
if(x==null || x=="")
{
alert("Firstname must be filled out");
return false;
}
var y= document.forms["myForm"] ["lastname"].value
if(y==null || y=="")
{
alert("Lastname must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>       
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>



På forhånd tak
Avatar billede w13 Novice
05. april 2011 - 17:09 #1
Fx:

[code]
<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm()
{
var x= document.forms["myForm"] ["firstname"].value
if(x==null || x=="")
{
showFormError("Firstname must be filled out");
return false;
}
var y= document.forms["myForm"] ["lastname"].value
if(y==null || y=="")
{
showFormError("Lastname must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  showFormError("Not a valid e-mail address");
  return false;
  }

hideFormError();
return true;
}

function showFormError(s) {
  var oError = document.getElementById('form_error');
  oError.firstChild.nodeValue(s);
  oError.style.display = 'block';
}

function hideFormError() {
  var oError = document.getElementById('form_error');
  oError.style.display = 'none';
}
</script>
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
<p id="form_error" style="display: none; color: #800;">&nbsp;</p>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
[/code]

Dog utestet. =)
Avatar billede w13 Novice
05. april 2011 - 17:11 #2
Ups, det gik vist ikke så godt. =) Forsøger igen:


<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm()
{
var x= document.forms["myForm"] ["firstname"].value
if(x==null || x=="")
{
showFormError("Firstname must be filled out");
return false;
}
var y= document.forms["myForm"] ["lastname"].value
if(y==null || y=="")
{
showFormError("Lastname must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  showFormError("Not a valid e-mail address");
  return false;
  }

hideFormError();
return true;
}

function showFormError(s) {
  var oError = document.getElementById('form_error');
  oError.firstChild.nodeValue(s);
  oError.style.display = 'block';
}

function hideFormError() {
  var oError = document.getElementById('form_error');
  oError.style.display = 'none';
}
</script>
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
<p id="form_error" style="display: none; color: #800;">&nbsp;</p>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Avatar billede pstidsen Novice
05. april 2011 - 17:19 #3
Avatar billede claes57 Ekspert
05. april 2011 - 17:27 #4
har du en lille tabel, så kan du let placere fejl tekst relevant sted, og sætte cursor så bruger bare skal taste:

<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm() {
var browserID = "n";
if (navigator.appName.indexOf("Microsoft")>=0){browserID="i";}
var x="";
if (browserID=='n'){
  fornavn = document.getElementById('fornavn');
  efternavn = document.getElementById('efternavn');
  mail = document.getElementById('mail');
};

x= document.forms["myForm"]["firstname"].value
fornavn.innerHTML="&#160;"
if(x==null || x=="") {
  fornavn.innerHTML="Firstname must be filled out";
  fornavn.focus();
  return false;
  }
x= document.forms["myForm"]["lastname"].value
efternavn.innerHTML="&#160;"
if(x==null || x=="") {
  efternavn.innerHTML="Lastname must be filled out"
  efternavn.focus();
  return false;
  }
x=document.forms["myForm"]["email"].value
mail.innerHTML="&#160;"
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
  mail.innerHTML="Not a valid e-mail address"
  mail.focus();
  return false;
  }
}
</script>     
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
<table border="0">
  <tr>
    <td>First name:</td>
    <td><input type="text" name="firstname" /></td>
    <td id="fornavn">&#160;</td>
  </tr>
  <tr>
    <td>Last name:</td>
    <td><input type="text" name="lastname" /></td>
    <td id="efternavn">&#160;</td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="email"></td>
    <td id="mail">&#160;</td>
  </tr>
  <tr>
    <td>&#160;</td>
    <td align="right"><input type="submit" value="Submit"></td>
    <td>&#160;</td>
  </tr>
</table>
</form>
</body>
</html>
Avatar billede Malika Nybegynder
05. april 2011 - 17:41 #5
#4 Ja det virker, men den viser det kun for en linje når man trykker på knappen, kan det ikke vises for alle linjer...java script:%20void(0);
Avatar billede Malika Nybegynder
05. april 2011 - 17:41 #6
#2 det virker ikke..:(
Avatar billede w13 Novice
05. april 2011 - 17:44 #7
Malika: Hvilken fejlbesked får du?
Avatar billede w13 Novice
05. april 2011 - 17:47 #8
Malika: Nu har jeg testet det og rettet en lille fejl, og det virker fint. :)


<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm()
{
var x= document.forms["myForm"] ["firstname"].value
if(x==null || x=="")
{
showFormError("Firstname must be filled out");
return false;
}
var y= document.forms["myForm"] ["lastname"].value
if(y==null || y=="")
{
showFormError("Lastname must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  showFormError("Not a valid e-mail address");
  return false;
  }

hideFormError();
return true;
}

function showFormError(s) {
  var oError = document.getElementById('form_error');
  oError.firstChild.nodeValue = s;
  oError.style.display = 'block';
}

function hideFormError() {
  var oError = document.getElementById('form_error');
  oError.style.display = 'none';
}
</script>
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
<p id="form_error" style="display: none; color: #800;">&nbsp;</p>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Avatar billede Malika Nybegynder
05. april 2011 - 17:50 #9
#8 ja det virker..:) tak
Avatar billede Malika Nybegynder
05. april 2011 - 17:54 #10
# Hvad laver du her:


hideFormError();
return true;
}

function showFormError(s) {
  var oError = document.getElementById('form_error');
  oError.firstChild.nodeValue = s;
  oError.style.display = 'block';
}

function hideFormError() {
  var oError = document.getElementById('form_error');
  oError.style.display = 'none';
}
Avatar billede claes57 Ekspert
05. april 2011 - 17:58 #11
jeg har flyttet nulstilling af gamle fejl til toppen, og viser alle fejl på én gang

<html>
<head>
<title> Java Script validation</title>
<script  type="text/javascript">
function validateForm() {
var browserID = "n";
if (navigator.appName.indexOf("Microsoft")>=0){browserID="i";}
var x="";
var fejl=false;
if (browserID=='n'){
  fornavn = document.getElementById('fornavn');
  efternavn = document.getElementById('efternavn');
  mail = document.getElementById('mail');
};
fornavn.innerHTML="&#160;"
efternavn.innerHTML="&#160;"
mail.innerHTML="&#160;"

x= document.forms["myForm"]["firstname"].value
if(x==null || x=="") {
  fornavn.innerHTML="Firstname must be filled out";
  fornavn.focus();
  fejl=true;
  }
x= document.forms["myForm"]["lastname"].value
if(x==null || x=="") {
  efternavn.innerHTML="Lastname must be filled out"
  efternavn.focus();
  fejl=true;
  }
x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
  mail.innerHTML="Not a valid e-mail address"
  mail.focus();
  fejl=true;
  }
if (fejl=true) return false;
}
</script>   
</head>
<body>

<form name="myForm"  action="" onsubmit="return validateForm()">
<table border="0">
  <tr>
    <td>First name:</td>
    <td><input type="text" name="firstname" /></td>
    <td id="fornavn">&#160;</td>
  </tr>
  <tr>
    <td>Last name:</td>
    <td><input type="text" name="lastname" /></td>
    <td id="efternavn">&#160;</td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="email"></td>
    <td id="mail">&#160;</td>
  </tr>
  <tr>
    <td>&#160;</td>
    <td align="right"><input type="submit" value="Submit"></td>
    <td>&#160;</td>
  </tr>
</table>
</form>
</body>
</html>
Avatar billede Malika Nybegynder
05. april 2011 - 18:08 #12
#11 Jeg er lige begyndt med at bruge javascript, har ikke helt styre på den endnu.

Hvad laver du her:

function validateForm() {
var browserID = "n";
if (navigator.appName.indexOf("Microsoft")>=0){browserID="i";}
var x="";
var fejl=false;
if (browserID=='n'){
  fornavn = document.getElementById('fornavn');
  efternavn = document.getElementById('efternavn');
  mail = document.getElementById('mail');
};
fornavn.innerHTML="&#160;"
efternavn.innerHTML="&#160;"
mail.innerHTML="&#160;"

x= document.forms["myForm"]["firstname"].value
if(x==null || x=="") {
  fornavn.innerHTML="Firstname must be filled out";
  fornavn.focus();
  fejl=true;
Avatar billede claes57 Ekspert
05. april 2011 - 18:29 #13
der er forskel på firefox og internet-explorer og for at det virker i begge, så kan denne måde bruges til at referere til et id
De første 2 linjer giver, at IE er = i, og andre er n
hvis briowser ikke er IE, så skal jeg hente id på felter

se er der 3 linjer med
fornavn.innerHTML="&#160;"
efternavn.innerHTML="&#160;"
mail.innerHTML="&#160;"
de nulstille bare gamle fejlkoder, ved at sætte en blank karakter ind - så er vi klar til at validere på ny.

pr felt kører så
x= document.forms["myForm"]["firstname"].value
if(x==null || x=="") {
  fornavn.innerHTML="Firstname must be filled out";
  fornavn.focus();
  fejl=true;
dvs læs værdi i felt
er den ikke udfyldt, så skriv en tekst (i det næste felt i tabellen) og sæt cursor der (det ser ikke ud til at virke!!!)
til sidste sættes et flag (fejl) så jeg aller sidst i koden kan teste på, om der er fundet fejl - hvis ja, så return false, så formularen ikke sendes.
Avatar billede w13 Novice
05. april 2011 - 19:37 #14
Malika: Jeg har tilføjet 2 funktioner.

Her:

function showFormError(s) {
  var oError = document.getElementById('form_error');
  oError.firstChild.nodeValue = s;
  oError.style.display = 'block';
}

er en funktion, der viser en fejlbesked. Men kan fx. skrive: showFormError('Her er en fejl');

Og her:

function hideFormError() {
  var oError = document.getElementById('form_error');
  oError.style.display = 'none';
}

er en funktion, der skjuler boksen med fejlbeskeden igen. =)
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

IT-JOB

Politiets Efterretningstjeneste

Fullstack softwareudvikler i PET

Netcompany A/S

Linux Operations Engineer

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Nye kolleger søges til IT Stab i Forsvaret

Capgemini Danmark A/S

IGNITE Graduate Program 2026