×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Show message at point of error without using Alert

Show message at point of error without using Alert

Show message at point of error without using Alert

(OP)
I would like to use JavaScript to show an error message in the document somewhere near where the error occurred rather than using the Alert function.


I tried using a global variable and assign the error to it, but I believe because I am assignig the value from within a function it will not work.

How can accomplish what I would like to do?

Here is the script within in the head tags:<script language="javascript" type="text/javascript">
<!--

    ErrMsg = ""

function SubmitUpdate()
{

    var f=document.ForgotPassword2;

    //verify that all the required fields have been populated.
    for (i=0;i<f.elements.length;i++)
        {
            var t=f.elements;
            for (j=0;j<r.length;j++)
            {
                  if (t.name==r[j])
                {
                    if (((t.type=="text"||t.type=="textarea")&&t.value=='')||(t.type.toString().charAt(0)=="s"&&t.selectedIndex<1)
                        ||(t.type=="password"&&t.value==''))
                    {
                        //alert("Please fill in all required values (with * by them)");
                        ErrMsg = "Please fill in all required values (with * by them)";    
                          t.focus();
                        return;
                    }
                  }
            }
          }
    //if pass form validation then submit the form
    if (ErrMsg = "")
        {
            f.submit();
        }
}
   r=new Array("txtAnswer", "txtPassword", "txtVPassword");  


//-->
</script>

This is the script within the body

<tr>
<script language="javascript" type="text/javascript">
<!-- hide from old browsers
                        document.write("<td>" + ErrMsg + "<\/td>")
//end script -->
</script>
</tr>

Validation part works, but my message does not appear.

Thanks

RE: Show message at point of error without using Alert

Hi morechocolate,

That document.write doesn't work because it is written while the page is created, and at that point ErrMsg has no value, so it writes nothing.

The best way to solve this is using layers.

First you add a <div> like the following:

<div id="someId" style="position:absolute; left:0; top:0;"></div>

Then you add the following code to your script in the <HEAD>

if (parseInt(navigator.appVersion) >= 4) {
  if (navigator.appName == "Netscape") {isNav = true;}
    else {isNav = false;}
}
function WriteLayerFunc(msg) {
  if (isNav) {
   document.layers["someId"].document.open()
   document.layers["someId"].document.write(msg)
   document.layers["someId"].document.close()
  } else {
   document.all["someId"].innerHTML = msg;
  }
}


And where you perform you're check, you use this:

ErrMsg = "Please fill in all required values (with * by them)";    
WriteLayerFunc(ErrMsg)
t.focus();
setTimeout("WriteLayerFunc('')",3000)
return;


The setTimeout wipes the message after three seconds.

Hope to be of service

Gtz,

Kristof

RE: Show message at point of error without using Alert

(OP)
Kristof,

Thank you for your reply.  I am still a newbie and have yet to learn all that is available to me or what is the best way to handle certain situations.

I have some questions:

1. Using, layers, is that considered DHTML?  

2. What is a good book for learning DHTML?

3. I have not seen the property innerHTML before, what is that?

Thank you again

Pam

RE: Show message at point of error without using Alert

Hi,

Layers is indeed DHTML.

Books published by O'Reilly about javascript and DHTML are both much worth reading.

But you should especially check out: http://www.dansteinman.com/dynduo it will seem a bit too difficult at first, but as soon as you get the hang of it you can't live without it.

The innerHTML is the text between tags, its an IE attribute.

Have fun, I know I do!

Gtz,

Kristof

RE: Show message at point of error without using Alert

(OP)
Thanks Kristof,

I will keep you posted as to my progress.  I am doing this project on the side for experience so I will probably not get back to it until tomorrow since I need to do my full-time job which involves no programming.


Pam

RE: Show message at point of error without using Alert

(OP)
Hello again Kristof,

I was reviewing your code example again and I had a question regard the DIV.  If it is set up like

<div id="someId" style="position:absolute; left:0; top:0;"></div>

Does that mean that the error will show at the top left corner of the page?  I would like it to appear above the text box where the error occurred or at least somewhere near it.  How much more difficult is that?  If what I would like to do is a little more involved if I leave the DIV style attributes as is, what will happen since I have an image at the top left of the page?

I have alot to learn.

Thanks

RE: Show message at point of error without using Alert

Hi,

Well, if there would be an image in the top left corner, the layer would appear above it, thus making the message hardly readable. So, you have to put the layer at a free spot in your page. To do this you have to experiment with the left and top properties of the layer.

The coordinate they form is the top-left corner of the layer. So, if you set both to 100, the layer will appear 100 pixels away from the left side of the window, and 100 pixels away from the top side of the window.

So, they follow the regular X Y axis, where the top-left corner of the window is indead 0,0.

A DIV can have many more attributes, basically anything that can be used in CSS. If you work for both IE and NS you have to be carefull since NS doesn't support everything IE does.

PS: Writing layers for NS can be hell! Luckily, the object model described by dansteinman makes it easy to work around that. Don't think it has been updated for NS6 yet. Anyhow, my company even ignores NS6 for now, because its just too unreliable.

Gtz,

Kristof

RE: Show message at point of error without using Alert

(OP)
Hi Kristof,

I am so close, but a get an error. In IE the error says an object is expected, and in NN when I type javascript: in the address line the error returned is that WriteLayerFunc is not defined.

Here is the code in the head.

<script language="javascript" type="text/javascript">
<!--

ErrMsg = "";

function SubmitUpdate()
{
var f=document.ForgotPassword2;
if (parseInt(navigator.appVersion) >= 4){
   if (navigator.appName == "Netscape"){isNav = true;}
     else {isNav = false;}
   }
function WriteLayerFunc(msg){
  if (isNav){
    document.layers["FormError"].document.open()
    document.layers["FormError"].document.write(msg)
    document.layers["FormError"].document.close()    
   }
   else{
    document.all["FormError"].innerText = msg;
   }
}
 
//verify that all the required fields have been populated.
   for (i=0;i<f.elements.length;i++)
    {
          var t=f.elements;
          for (j=0;j<r.length;j++)
      {
           if (t.name==r[j])
      {
           if (((t.type=="text"||t.type=="textarea")   &&t.value=='')||(t.type.toString().charAt(0)=="s"&&t.selectedIndex<1) ||(t.type=="password"&&t.value==''))
    {
         ErrMsg = "Please fill in all required values (with * by them)";
                        WriteLayerFunc(ErrMsg)
          t.focus();
-->Error setTimeout("WriteLayerFunc(ErrMsg)",3000)
        return;
                    }
                  }
            }
          }
    //if pass form validation then submit the form
    if (ErrMsg = "")
        {
            f.submit();
        }
}
   r=new Array("txtAnswer", "txtPassword", "txtVPassword");  


//-->
</script>

Here is the code in the body

<tr>
<td class="Msg" colspan="3"><div id="FormError" style="position:relative; left:0; top:0;"></div></td>
</tr>

Changing the position to relative put the error where I wanted it as well has changing from innerHTML to innerText

Thanks for all your help

RE: Show message at point of error without using Alert

you can do this and still use your original code:


function displayError {

  if (document.layers) {
    document.layers.error.document.write(errMsg);
    document.layers.error.document.close();
  
  } else if (document.all) {
      error.innerHTML = errMsg;

  } else {
      alert("fill in all fields marked with a *");
  }
}


then you display the error with:

<span id=error style="position:relative"></span>

this should work in ie and ns, you can put a span next to all of your fields, then do a test to find which field gives you an error and send the error msg to the right span

-Greg

RE: Show message at point of error without using Alert

oops, that should be:
<span id="error" style="position:relative"></span>

-Greg

RE: Show message at point of error without using Alert

(OP)
Greg - when you say use my original code do you mean the code from my first post or the post your responeded to?

The function displayError, would that be replacing the WriteLayerFunc function?

Doesn't displayError have to have an argurment?

Finally, I would I know which span to go to?

Thanks for your help.

RE: Show message at point of error without using Alert

that was just as an example, accually you can just put the code in a test in you validation script:

if (errField != "") {
     
  if (document.layers) {
    document.layers. + errField +.document.write(errMsg);
    document.layers. + errField +.document.close();
  
  } else if (document.all) {
      errField + .innerHTML = errMsg;

  } else {
      alert("fill in all fields marked with a *");
  }
}


then you need to put a span everwhere want an error msg to show up just change the id (pwField, name, ect..), then you just need to give the field that failed validation a variable for example if they didnt enter a password, errField = "pwField", then it will show the message on the span called pwField..hope that isnt too confusing

-Greg

RE: Show message at point of error without using Alert

(OP)
I must have been on crack when I said that this was working with a position of relative.  I was only working in IE with the position of relative.

After some research I have found out NN4 layers are absolute. Now my problem is getting the information to set properly on the page. IE is slightly overlaying the textbox element within the td tags and in NN4 it is at position 0,0 of the document.  

I will play around with the postitioning like Kristof suggested, but I have been working on this for a while and I think I am going to give up on this method. I just like seeing this types of error messages as opposed to the alert boxes. My only other option is to user Session Variables and use the server to display the messages.

Thanks for all your help guys.

RE: Show message at point of error without using Alert

hie
morechocolate, >>After some research I have found out NN4 layers are absolute
netscape also has relativelly positioned layers:
it is <ilayer> or <div style="position:relative">

regards, vic

RE: Show message at point of error without using Alert

Hi all,

As mentioned above, NS layers can be relative, but I believe that they should be absolute, because I've experienced problems when you use relative.

Hiding/showing and moving/sliding seem to have difficulties. Don't ask me why, but that's just what I've noticed.


Gtz,

Kristof

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close