Kan man lave sin egen alert boks?

Du kan lave det på flere måder:

Et layer, som vises ved fejl, og ellers er skjult ...

I IE kan du bruge et popup-objekt eller en Modal- eller ModelessDialog ...

-- og så er der selvfølgelig en almindelig popup, så andre browsere også kan være med ...

Til gengæld kender jeg ikke nogen metode til at genskabe det bip, som IE kommer med (det kommer iøvrigt heller ikke i f.eks. Mozilla !-)

Ok - det er ligemeget med bibbet...

Den mest simple måde (for en uerfaren i javascript som mig), og en måde som dur i alle browsere...

Hrm, alle browsere ...

Men jeg ville selv vælge layer-modellen, som er rasende simpel at implementere i en ie5+ og ns6+/Mozilla og alle nyere version:

<div id="fejlDiv" style="position:absolute;display:none;z-index:100; left:200px;top:150px;width:200px;height:200px;background:#cbc77a;color:red;font-weight:900" onclick="this.style.display='none';"></div>

-- og så i stedet for alert bruger du denne funktion:

function visFejl(txt){
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt;
  fjl.style.display = 'block';
}

I stedet for alert..... hm.

Sletter jeg bare hele denne smørre eller ??

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

Ændr denne linje fra:
  } if (errors) alert('The following error(s) occurred:\n'+errors);

til:

  } if (errors) visFejl('The following error(s) occurred:\n'+errors);

-- og undlad evt. at give div'en en højde, så vil den selv indstille højden !-)

Hov, så skal du jo også udskifte \n med <br>:

function visFejl(txt){
  txt = txt.replace(/\n/g,"<br>");
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt;
  fjl.style.display = 'block';
}

Så kan jeg bedre forstå det - lige nu virker det ikke rigtigt *G*

Kan du ikke lige skrive konkret hvad der skal stå - for jeg taber tråden, når du siger udskift dit med dat....

Bliver layer vist midt på skærmen eller?

I eksemplet har jeg vurderet, at det var rasende ligegyldigt, men det er ikke det svære ...

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) visFejl('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
function visFejl(txt){
  txt = txt.replace(/\n/g,"<br>");
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt;
  fjl.style.display = 'block';
}

Det driller - nu reagerer siden slet ikke på at jeg taster forkert.

Ville være fint, hvis layeret først bliver vist, når jeg trykker på submit knappen..... men det er muligt at det så blivere mere kompliceret...

Så må du være kommet til at lave andre fejl ...

Selv ganske små afvigelser kan jo være katastrofale i programmering !-)

Har du ikke en mulighed for at lægge url'en, for så er det nemt at følge med i det samme !o]

Ok - her er formularen det gælder:
http://www.nicolin.dk/div/alertboks.htm

Men jeg skal jo også se den side, hvor div'en, du bruger som alertbox og valideringen er !-)

Hm....

Ja, jeg kan ikke rigtig vise dig projektet, så jeg må prøve at lave en formular magen til med samme validering osv...

Det, som er vigtigt, er at jeg kan kigge på den samme kode, som du kigger på, så hvis du f.eks. inkluderer den kan du jo bare linke den ind i et script-tag !-)

Ja, så nu har jeg sat validering på felterne og nu er den som jeg umiddelbart har lavet den på den anden side.

Så vil jeg godt have at man indtaster og når man trykker på "opret profil" skal alert boksen komme frem.

Hvis den også kan komme frem midt på skærmen ville det være perfekt *S*

-- det er et tilfælde, at den på min skærm er centreret, men det kan vi koncentrere os om, om et øjeblik ...

Du havde hverken aktiveret DreamWeavers validering eller sat div'en ind ?-)

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) visFejl('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
function visFejl(txt){
  txt = txt.replace(/\n/g,"<br>");
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt + "<br><center><button onclick='this.parentNode.style.display=\"none\"'>&nbsp;Ok&nbsp;</button></center>";
  fjl.style.display = 'block';
}
//-->
</script>
</head>

<body>
<div id="fejlDiv" style="position:absolute;display:none;z-index:100; left:200px;top:150px;width:450px;background:#cbc77a;color:red;font-weight:900;border:3px ridge black;padding:3px;" onclick="this.style.display='none';"></div>

<form action="" method="post" name="newuser" id="newuser" onsubmit="MM_validateForm('memberno','Medlemsnummer er nødvendigt','R');return MM_returnValue;">
           
  <table width="400" border="0" cellpadding="2" cellspacing="0" class="tableborder-dark">
    <tr>
                <td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#CFDBE7">
          <tr>
            <td height="20" background="Pictures site/back-topboxes.gif" class="boldblack">Oprettelse
              af profil</td>
          </tr>
          <tr>
            <td valign="top" class="lightborder-none"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="21%" height="20" class="fontnounderline">Medlemsnummer:</td>
                  <td width="79%" class="boldblack"><input name="memberno" type="text" id="memberno" style="font-size: x-small; width: 110px;" onBlur="MM_validateForm('memberno','','RisNum','username','','R','mail','','RisEmail','password','','R');return document.MM_returnValue">
                    <span class="linkscat"> </span></td>
                </tr>
                <tr>
                  <td class="fontnounderline">&Oslash;nsket brugernavn: </td>
                  <td class="linkscat"> <input name="username" type="text" id="username" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
                <tr>
                  <td height="20" class="fontnounderline">Adgangskode: </td>
                  <td height="20" class="linkscat"><input name="password" type="password" class="linkscat" id="password" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
                <tr>
                  <td height="20" class="fontnounderline">E-mail adresse: </td>
                  <td height="20" class="linkscat"><input name="mail" type="text" class="linkscat" id="mail" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td valign="top" class="lightborder"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fontnounderline">
                <tr>
                  <td height="25"> <input name="accept" type="checkbox" id="accept" value="checkbox">
                    Jeg har l&aelig;st og forst&aring;et reglerne.</td>
                </tr>
                <tr>
                  <td><span class="linkscat">
                    <input name="Submit22" type="submit" style="font-size: x-small; width: 120px;" value="Opret brugernavn">
                    </span></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
              </tr>
            </table>
        </form>
</body>
</html>

-- jeg har kun sat ind, at der skal være et medlemsnummer, resten kan du jo finde i DreamWeavers muligheder !-)

Ok - men kan man lave den sådan at den først popper op idét jeg trykker Opret brugernavn?

Det er da sådan, det fungerer ?-)

Jeg indtaster i første felt, når jeg så går ned i felt 2 og vil indtaste, popper den op...

Jeg skal i seng nu - ser ind i morgen. *S*

Gaab, det havde jeg ikke forestillet mig, kunne forekomme *g*

Det, som skulle være i onsubmit er af en eller anden grund blevet smidt på onblur i det første felt, så starten af formen skal være:

<form action="" method="post" name="newuser" id="newuser" onsubmit="MM_validateForm('memberno','','RisNum','username','','R','mail','','RisEmail','password','','R');return document.MM_returnValue">
           
  <table width="400" border="0" cellpadding="2" cellspacing="0" class="tableborder-dark">
    <tr>
                <td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#CFDBE7">
          <tr>
            <td height="20" background="Pictures site/back-topboxes.gif" class="boldblack">Oprettelse
              af profil</td>
          </tr>
          <tr>
            <td valign="top" class="lightborder-none"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="21%" height="20" class="fontnounderline">Medlemsnummer:</td>
                  <td width="79%" class="boldblack"><input name="memberno" type="text" id="memberno" style="font-size: x-small; width: 110px;">

Jeg giver snart op - det er for avanceret til mig.

Dette er hvad jeg kan præstere indtil videre:
http://www.nicolin.dk/slettes/test.htm

Windows egen alert boks...., men nu har jeg da fået rettet teksten, så den er til at leve med. Kan man mon fjerne den gule advarsel trekant eller gøre noget ved boksen så den bliver kønnere?

Har du ikke prøvet at sætte det ovenstående ind ?-)

-- og nej, det er jo derfor det er interessant at have sin egen boks ...

Ja, jeg har siddet og rodet med alt det du har lavet, men det går bare ikke rigtigt.

Findes der ikke en "alert boks" builder? **G

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) visFejl('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
function visFejl(txt){
  txt = txt.replace(/\n/g,"<br>");
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt + "<br><center><button onclick='this.parentNode.style.display=\"none\"'>&nbsp;Ok&nbsp;</button></center>";
  fjl.style.display = 'block';
}
//-->
</script>
</head>

<body>
<div id="fejlDiv" style="position:absolute;display:none;z-index:100; left:200px;top:150px;width:450px;background:#cbc77a;color:red;font-weight:900;border:3px ridge black;padding:3px;" onclick="this.style.display='none';"></div>

<form action="" method="post" name="newuser" id="newuser" onsubmit="MM_validateForm('memberno','','RisNum','username','','R','mail','','RisEmail','password','','R');return document.MM_returnValue">
           
  <table width="400" border="0" cellpadding="2" cellspacing="0" class="tableborder-dark">
    <tr>
                <td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#CFDBE7">
          <tr>
            <td height="20" background="Pictures site/back-topboxes.gif" class="boldblack">Oprettelse
              af profil</td>
          </tr>
          <tr>
            <td valign="top" class="lightborder-none"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="21%" height="20" class="fontnounderline">Medlemsnummer:</td>
                  <td width="79%" class="boldblack"><input name="memberno" type="text" id="memberno" style="font-size: x-small; width: 110px;">
                    <span class="linkscat"> </span></td>
                </tr>
                <tr>
                  <td class="fontnounderline">&Oslash;nsket brugernavn: </td>
                  <td class="linkscat"> <input name="username" type="text" id="username" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
                <tr>
                  <td height="20" class="fontnounderline">Adgangskode: </td>
                  <td height="20" class="linkscat"><input name="password" type="password" class="linkscat" id="password" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
                <tr>
                  <td height="20" class="fontnounderline">E-mail adresse: </td>
                  <td height="20" class="linkscat"><input name="mail" type="text" class="linkscat" id="mail" style="font-size: x-small; width: 110px;">
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td valign="top" class="lightborder"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fontnounderline">
                <tr>
                  <td height="25"> <input name="accept" type="checkbox" id="accept" value="checkbox">
                    Jeg har l&aelig;st og forst&aring;et reglerne.</td>
                </tr>
                <tr>
                  <td><span class="linkscat">
                    <input name="Submit22" type="submit" style="font-size: x-small; width: 120px;" value="Opret brugernavn">
                    </span></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
              </tr>
            </table>
        </form>
</body>
</html>

Ja, nu virker den som den skal, men problemet er lidt at jeg skal bruge den i flere sammenhænge - forskellige formler, så hvis jeg bare vidste hvad jeg skulle skrive/gøre, så jeg selv kan lave den fremover.

Hvis vi nu tager mit nye link - lavede den simpel.

Dernæst lavede jeg et layer med fyldfarve og kaldte det FEJL, og så rettede jeg ordet ALERT til ordet FEJL, men det er åbenbart ikke nok....

Men ok - nu kan jeg måske printe din kode ud, og min egen - og se hvor forskellen i koden ligger, og hvad det er jeg skal gå ind og rette.

Husk at lægge et svar - for du har jo besvaret spørgsmålet *S*

Du skriver koden selv, right?

Der er ikke nogle funktioner/knapper i dreamweaver man kan trykke på, vel?

Du skal lægge den lille funktion ind:

function visFejl(txt){
  txt = txt.replace(/\n/g,"<br>");
  fjl = document.getElementById('fejlDiv');
  fjl.innerHTML = txt + "<br><center><button onclick='this.parentNode.style.display=\"none\"'>&nbsp;Ok&nbsp;</button></center>";
  fjl.style.display = 'block';
}

-- og så rette alert i function MM_validateForm()-funktionen til visFejl ...

Layeret har jeg givet id="fejlDiv" og det kan du bare genbruge !-)

-- og velbekomme '-)

Ja, nu har jeg sammenlignet min og din kode, og kan se forskellen. Men det ser ud til at din validering sidder på selve #form og min på submit knappen, men det betyder måske ikke noget....

Nu kan jeg da se hvad forskellen er - må eksperimentere lidt.

Tak for hjælpen.

Det korrekte er at bruge den slags i onsubmit på form-tagget ...

-- og jeg takker for point ;~}