DOM help

  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

I wrote a Javascript that is supposed to validate a form.
But when I run it I get an error:

'window.document.Form.Name' is null or not an object.

Here are the relevant parts of my code:
-------------------------------------------------------------------------------

Code: [ Select ]
var N = window.document.Form.Name;

function Verify(Form) {
   if (N.value == "") {
     window.alert("Please enter your name.");
     N.focus();
     return false;
   } else {
   if (N.value == "Name") {
     window.alert ("'Your Name' is invalid: Please try again.");
     N.focus();
     N.select();
     return false;
   } else {
     return true;
}
  1. var N = window.document.Form.Name;
  2. function Verify(Form) {
  3.    if (N.value == "") {
  4.      window.alert("Please enter your name.");
  5.      N.focus();
  6.      return false;
  7.    } else {
  8.    if (N.value == "Name") {
  9.      window.alert ("'Your Name' is invalid: Please try again.");
  10.      N.focus();
  11.      N.select();
  12.      return false;
  13.    } else {
  14.      return true;
  15. }

------------------the form------------

Code: [ Select ]
<form name="Form" onsubmit="return Verify(Form)">
<input name="Name" type="text" class="type" value="Your Name" tabindex="1" size="68" maxlength="60" />
<input type="submit" value="Send" tabindex="5" name="Send" />
</form>
  1. <form name="Form" onsubmit="return Verify(Form)">
  2. <input name="Name" type="text" class="type" value="Your Name" tabindex="1" size="68" maxlength="60" />
  3. <input type="submit" value="Send" tabindex="5" name="Send" />
  4. </form>


I am stumped. Any help for this would be greatly appreciated.[/code]
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Try moving the variable declaration for N inside the function. I'm assuming you have that function inside the head. Code outside of a function is going to be evaluated immediately, so you are trying to access the text field before it has been created since the variable assignment in the head is going to happen before the text field is seen/created by the browser.
  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

thanks for that tip. that works with the first text box in the form. the validation comes into play when the box loses focus. but it doesnt work with the other elements. all of the functions are in the same external script file. should they be within separate script tags? the code is below ... and is there an easier way to do this, since the code for each function is similar?

Code: [ Select ]
function Verify(Name) {
var N = document.Form.Name;
if (N.value == "") {window.alert("Please enter your name."); N.focus(); return false;} else {
if (N.value == "Name") {window.alert("'Name' is invalid: Please try again.");
    N.focus(); N.select(); return false; } else {return true;}
}
function Verify(Mail) {
var E = document.Form.Mail;
if (E.value == "") {window.alert("Please enter your name."); E.focus(); return false;} else {
if (E.value == "Email") {window.alert("'Email' is invalid: Please try again.");
    E.focus(); E.select(); return false; } else {return true;}
}
function Verify(Subj) {
var S = document.Form.Subj;
if (S.value == "") {window.alert("Please enter your name."); S.focus(); return false;} else {
if (S.value == "Email") {window.alert("'Subject' is invalid: Please try again.");
    S.focus(); S.select(); return false; } else {return true;}
}
function Verify(Mess) {
var M = document.Form.Mess;
if (M.value == "") {window.alert("Please enter a message."); M.focus();    return false;}
if (M.value == "Your Message") {window.alert("'Message is nvalid: Please try again.");
    M.focus(); M.select(); return false; } else {return true;}}}}}
  1. function Verify(Name) {
  2. var N = document.Form.Name;
  3. if (N.value == "") {window.alert("Please enter your name."); N.focus(); return false;} else {
  4. if (N.value == "Name") {window.alert("'Name' is invalid: Please try again.");
  5.     N.focus(); N.select(); return false; } else {return true;}
  6. }
  7. function Verify(Mail) {
  8. var E = document.Form.Mail;
  9. if (E.value == "") {window.alert("Please enter your name."); E.focus(); return false;} else {
  10. if (E.value == "Email") {window.alert("'Email' is invalid: Please try again.");
  11.     E.focus(); E.select(); return false; } else {return true;}
  12. }
  13. function Verify(Subj) {
  14. var S = document.Form.Subj;
  15. if (S.value == "") {window.alert("Please enter your name."); S.focus(); return false;} else {
  16. if (S.value == "Email") {window.alert("'Subject' is invalid: Please try again.");
  17.     S.focus(); S.select(); return false; } else {return true;}
  18. }
  19. function Verify(Mess) {
  20. var M = document.Form.Mess;
  21. if (M.value == "") {window.alert("Please enter a message."); M.focus();    return false;}
  22. if (M.value == "Your Message") {window.alert("'Message is nvalid: Please try again.");
  23.     M.focus(); M.select(); return false; } else {return true;}}}}}


here's the form code i have:

Code: [ Select ]
<form name="Form"><div style="width:100%; vertical-align:top">

<input name="Name" type="text" class="type" value="Name" onblur="javascript:Verify(Name)"
tabindex="1" size="68" maxlength="60" /><br /><br />

<input name="Mail" type="text" class="type" value="Email" onblur="javascript:Verify(Mail)"
tabindex="2" size="68" maxlength="60" /><br /><br />

<input name="Subj" type="text" class="type" value="Subject" onblur="javascript:Verify(Subj)"
tabindex="3" size="68" maxlength="60" /><br /><br />

<textarea name="Mess" class="type" onblur="javascript:Verify(Mess)"
cols="51" rows="20" tabindex="4">Your message here.</textarea><br /><br />

<input type="submit" value="Send" tabindex="5" name="Send" /> &nbsp;&nbsp;
<input name="reset" type="reset" tabindex="6" value="Clear" />
</div></form>
  1. <form name="Form"><div style="width:100%; vertical-align:top">
  2. <input name="Name" type="text" class="type" value="Name" onblur="javascript:Verify(Name)"
  3. tabindex="1" size="68" maxlength="60" /><br /><br />
  4. <input name="Mail" type="text" class="type" value="Email" onblur="javascript:Verify(Mail)"
  5. tabindex="2" size="68" maxlength="60" /><br /><br />
  6. <input name="Subj" type="text" class="type" value="Subject" onblur="javascript:Verify(Subj)"
  7. tabindex="3" size="68" maxlength="60" /><br /><br />
  8. <textarea name="Mess" class="type" onblur="javascript:Verify(Mess)"
  9. cols="51" rows="20" tabindex="4">Your message here.</textarea><br /><br />
  10. <input type="submit" value="Send" tabindex="5" name="Send" /> &nbsp;&nbsp;
  11. <input name="reset" type="reset" tabindex="6" value="Clear" />
  12. </div></form>
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

Here's your problems:

1. Var "N" should be inside of the function.
2. A couple "if" statements were never closed with a "}"

Below is the corrected code. (I tested this and it works)

Code: [ Select ]
<script language="javascript">
function Verify(Form) {
var N = window.document.Form.Name;
   if (N.value == "") {
     window.alert("Please enter your name.");
     N.focus();
     return false;
   } else {
     if (N.value == "Name") {
       window.alert ("'Your Name' is invalid: Please try again.");
       N.focus();
       N.select();
       return false;
     } else {
       return true;
     }
   }
}

</script>

<form name="Form" onsubmit="return Verify(Form)">
<input name="Name" type="text" class="type" value="Your Name" tabindex="1" size="68" maxlength="60" />
<input type="submit" value="Send" tabindex="5" name="Send" />
</form>
  1. <script language="javascript">
  2. function Verify(Form) {
  3. var N = window.document.Form.Name;
  4.    if (N.value == "") {
  5.      window.alert("Please enter your name.");
  6.      N.focus();
  7.      return false;
  8.    } else {
  9.      if (N.value == "Name") {
  10.        window.alert ("'Your Name' is invalid: Please try again.");
  11.        N.focus();
  12.        N.select();
  13.        return false;
  14.      } else {
  15.        return true;
  16.      }
  17.    }
  18. }
  19. </script>
  20. <form name="Form" onsubmit="return Verify(Form)">
  21. <input name="Name" type="text" class="type" value="Your Name" tabindex="1" size="68" maxlength="60" />
  22. <input type="submit" value="Send" tabindex="5" name="Send" />
  23. </form>


Hope this helps!
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I think you could probably use just one function and call it with different arguments:

Code: [ Select ]
function Verify(field,message) {
    if (field.value == "") {
        window.alert("Please enter your " + message);
        field.focus();
        return false;
    }
    else {
        if (field.value == message) {
            window.alert(message + " is invalid: Please try again.");
          field.focus();
            field.select();
            return false;
        }
    }
    return true;
}
  1. function Verify(field,message) {
  2.     if (field.value == "") {
  3.         window.alert("Please enter your " + message);
  4.         field.focus();
  5.         return false;
  6.     }
  7.     else {
  8.         if (field.value == message) {
  9.             window.alert(message + " is invalid: Please try again.");
  10.           field.focus();
  11.             field.select();
  12.             return false;
  13.         }
  14.     }
  15.     return true;
  16. }


and then call it with:

Code: [ Select ]
Verify(this,'Name')
Verify(this,'Email')
Verify(this,'Subject')
Verify(this,'Your message')
  1. Verify(this,'Name')
  2. Verify(this,'Email')
  3. Verify(this,'Subject')
  4. Verify(this,'Your message')


as longs as you're calling it from onblur inside the individual form elements themselves then the this keyword can be used to pass the field to the function call and you don't have to declare a separate variable since it's a parameter of the function.

Don't use script tags inside an external .js file - just javascript code. Also be careful to close your conditionals, I think you were missing some brackets in there as CazpianXI mentioned.
  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

I tried the code and it works, but i don't think checking the onblur method is the best way to do this ... sorry for asking so much, but im not a pro at javascript - there is a lot i have to learn still. is there a way to check all four using < form onsubmit=...?

thanks so much for the help.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

You can add a Validate function that calls the Verify function for each field and only returns true if they all pass the test (it will return false as soon as one flunks the test):

Code: [ Select ]
function Validate() {
    return(    
            Verify(document.Form.Name,'Name') &&
            Verify(document.Form.Mail,'Email') &&
            Verify(document.Form.Subj,'Subject') &&
            Verify(document.Form.Mess,'Your message')
         )
}
  1. function Validate() {
  2.     return(    
  3.             Verify(document.Form.Name,'Name') &&
  4.             Verify(document.Form.Mail,'Email') &&
  5.             Verify(document.Form.Subj,'Subject') &&
  6.             Verify(document.Form.Mess,'Your message')
  7.          )
  8. }


and then call it from onsubmit:

Code: [ Select ]
<form name="Form" onsubmit="return Validate()">
  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

I really appreciate your helping me with this. I'll remember it. :D
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

Well, that's why Ozzu's here... webmaster's helping webmasters!

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.