/    Sign up×
Community /Pin to ProfileBookmark

external js validation w/onchange?

Copy linkTweet thisAlerts:
Nov 07.2004

ok, i need some help. I’ve loaded all my function definitions into an external .js file…valform.js. loaded as

<script type=”text/javascript” src=”valform.js”></script>

ok, now later in the page i have a form setup, and i want to use an onchange event to validate one of the fields. How do i call the validation function from the valform.js file for an onchange event. for example, i want to validate email address:

<label>E-mail address <input name=”e_mail1″ [B]onchange=”javascript:validateEmail”[/B] type=”text”></label>

thats not working so i know thats not the correct way, can someone tell me the correct way?

thanks in advance

to post a comment
JavaScript

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycNov 07.2004 — onchange="validateEmail()"
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — i've tried several different ways to validate the email address and nothing is working and i'm not sure why. Please help! I also need a way to validate the First and Last name fields are at least 3 alpha characters long. I have no idea what i'm doing ?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Great Opportunity</title>

<style type="text/css">

<!--

form {width:10em}

fieldset {padding:1ex}

label, input, button {display:block}

label {margin:1em 0}

button {margin:auto}

-->

</style>

<script language = "Javascript">

<!--

[B]function validateEmail(addr,man,db) {

if (addr == '' && man) {

if (db) alert('email address is mandatory');

return false;

}

var invalidChars = '/' ";:?!()[]{}^|';

for (i=0; i<invalidChars.length; i++) {

if (addr.indexOf(invalidChars.charAt(i),0) > -1) {

if (db) alert('email address contains invalid characters');

return false;

}

}

for (i=0; i<addr.length; i++) {

if (addr.charCodeAt(i)>127) {

if (db) alert("email address contains non ascii characters.");

return false;

}

}



var atPos = addr.indexOf('@',0);

if (atPos == -1) {

if (db) alert('email address must contain an @');

return false;

}

if (atPos == 0) {

if (db) alert('email address must not start with @');

return false;

}

if (addr.indexOf('@', atPos + 1) > - 1) {

if (db) alert('email address must contain only one @');

return false;

}

if (addr.indexOf('.', atPos) == -1) {

if (db) alert('email address must contain a period in the domain name');

return false;

}

if (addr.indexOf('@.',0) != -1) {

if (db) alert('period must not immediately follow @ in email address');

return false;

}

if (addr.indexOf('.@',0) != -1){

if (db) alert('period must not immediately precede @ in email address');

return false;

}

if (addr.indexOf('..',0) != -1) {

if (db) alert('two periods must not be adjacent in email address');

return false;

}

var suffix = addr.substring(addr.lastIndexOf('.')+1);

if (suffix.length != 2 && suffix != 'com' && suffix != 'net' && suffix != 'org' && suffix != 'edu' && suffix != 'int' && suffix != 'mil' && suffix != 'gov' & suffix != 'arpa' && suffix != 'biz' && suffix != 'aero' && suffix != 'name' && suffix != 'coop' && suffix != 'info' && suffix != 'pro' && suffix != 'museum') {

if (db) alert('invalid primary domain in email address');

return false;

}

return true;

}[/B]

-->

</script>


</head>

<body BGCOLOR="#378dca" TEXT="#ffffff" LINK="#0000FF" ALINK="#FF0000" VLINK="#009900">



<form method="post" action="http://www.response-o-matic.com/cgi-

bin/rom.pl" onsubmit="return check (this.form);">

<Align="right"><fieldset>

<legend>Register</legend>

<label>Name <input name="name" type="text"></label>

<label>Last Name <input name="name2" type="text"></label>

<label>Phone number <input name="phone" onblur="this.value = new PhoneNumber (this.value); if (!this.value.isPhoneNumber ()) {alert ('Please enter a 10 digit phone number.'); this.value = ''; this.focus()}" type="text"></label>

[B]<label>E-mail address <input name="email" onblur="if (!validateEmail(email,1,1)) {

alert('email address is invalid or was not entered');

return false;} " type="text"></label>[/B]

<label>Confirm e-mail address <input name="e_mail2" onchange="if (this.value != this.form.email.value) {alert ('Please confirm your email address.'); this.value = ''; this.focus()}" type="text"></label>

<label>State:<br> <select name="state">

<option value="" selected>Please Select</option>

<option value="AK">Alaska</option>

<option value="AL">Alabama</option>

<option value="AR">Arkansas</option>

<option value="AZ">Arizona</option>

<option value="CA">California</option>

<option value="CO">Colorada</option>

<option value="CT">Conneticut</option>

<option value="DC">District of Colombia</option>

<option value="DE">Delaware</option>

<option value="FL">Florida</option>

<option value="GA">Georgia</option>

<option value="HI">Hawaii</option>

<option value="IA">Iowa</option>

<option value="ID">Idaho</option>

<option value="IL">Illinois</option>

<option value="IN">Indiana</option>

<option value="KS">Kansas</option>

<option value="KY">Kentucky</option>

<option value="LA">Louisiana</option>

<option value="MA">Massachusetts</option>

<option value="MD">Maryland</option>

<option value="ME">Maine</option>

<option value="MI">Michigan</option>

<option value="MN">Minnesota</option>

<option value="MO">Missouri</option>

<option value="MS">Mississippi</option>

<option value="MT">Montana</option>

<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>

<option value="NE">Nebraska</option>

<option value="NH">New Hampshire</option>

<option value="NJ">New Jersey</option>

<option value="NM">New Mexico</option>

<option value="NV">Nevada</option>

<option value="NY">New York</option>

<option value="OH">Ohio</option>

<option value="OK">Oklahoma</option>

<option value="OR">Oregon</option>

<option value="PA">Pennsylvania</option>

<option value="RI">Rhode Island</option>

<option value="SC">South Carolina</option>

<option value="SD">South Dakota</option>

<option value="TN">Tennessee</option>

<option value="TX">Texas</option>

<option value="UT">Utah</option>

<option value="VI">Virgin Islands</option>

<option value="VT">Vermont</option>

<option value="VA">Virginia</option>

<option value="WA">Washington</option>

<option value="WI">Wisconsin</option>

<option value="WV">West Virginia</option>

<option value="WY">Wyoming</option>

<option value="XX">Other...</option>

</select></label>

<label>Your time zone:<br><select name="zone">

<option value="" selected>Please Select</option>

<option value="Eastern">Eastern

<option value="Central">Central

<option value="Mountain">Mountain

<option value="Pacific">Pacific

</select></label>

<label>Best time to call:<br><select name="times">

<option value="" selected>Please Select</option>

<option value="Morning">Morning

<option value="Afternoon">Afternoon

<option value="Evening">Evening

</select></label>

<br><p>

<button type="submit">Submit</button>

<FONT SIZE="-3">By clicking submit, you agree to receive a telephone call from a representative of this company



</fieldset>


</form>



</body>

</html>
Copy linkTweet thisAlerts:
@CharlesNov 08.2004 — Let's start from the beginning. Get your page to pass [url=http://validator.w3.org/]The Validator[/url].
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — I've fixed all that i can, everything else listed here is what the server puts in after my own code, since its a free hosted site



Line 206, column 485: document type does not allow element "IMG" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "ADDRESS" start-tag

...tats" border="0" width="1" height="1"></noscript>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

&#9993;

Line 206, column 496: end tag for "NOSCRIPT" which is not finished

...r="0" width="1" height="1"></noscript>

&#9993;

Line 207, column 47: cannot generate system identifier for general entity "t"

<IMG SRC="http://geo.yahoo.com/serv?s=19190039&t=1099879584" ALT=1 WIDTH=1 HEIGHT=1>

An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (?. The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".

Entity references start with an ampersand (&) and end with a semicolon (?. If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.

Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
Copy linkTweet thisAlerts:
@CharlesNov 08.2004 — Once you have no errors you can start working on the JavaScript.
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — I've fixed all the errors that are possible to fix, the only ones left are errors from things the server adds in after my code, its a free web server..."geocities"
Copy linkTweet thisAlerts:
@CharlesNov 08.2004 — Post then a link to what you have.
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — [URL=http://www.geocities.com/donella_lewis/test.html]www.geocities.com/donella_lewis/test.html[/URL]
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — still need help with this email validation...please
Copy linkTweet thisAlerts:
@Willy_DuittNov 08.2004 — Link no worky for me...

Oh... I just got it to load at W3C and it does not look like you fixed the errors....

This one is your opening script tag and has nothing to do with Geocities nor do most of the others which appear throughout the document...


Line 20, column 19: there is no attribute "LANGUAGE"

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

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.
[/quote]

Gee, I was bored and looking for something to do, but validating a page was not what I had in mind...

Good Luck;

.....Willy
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — <script language = "javascript" type="text/javascript">

and what exactly is wrong with this?


****EDIT****

ok, got it, i switched from a strict style to transitional, and removed my <Font Size="-3"> tag and replaced it with a css tag to reduce the font size, now literally, the only errors that come up, are things that i have NO CONTROL OVER. none of this stuff is MY script, it is placed by the server and i have no control over it. For example:

"Line 202, column 69: end tag for element "OBJECT" which is not open

[B]... by server. PLEASE REMOVE [/B] --></object></layer></div></span></style></noscript


&#9993;

Line 202, column 77: end tag for element "LAYER" which is not open

...er. PLEASE REMOVE --></object></layer></div></span></style></noscript></table

&#9993;

Line 202, column 83: end tag for element "DIV" which is not open

...EASE REMOVE --></object></layer></div></span></style></noscript></table></scr

&#9993;

Line 202, column 90: end tag for element "SPAN" which is not open

...MOVE --></object></layer></div></span></style></noscript></table></script></a

&#9993;

Line 202, column 98: end tag for element "STYLE" which is not open

...</object></layer></div></span></style></noscript></table></script></applet><s
Copy linkTweet thisAlerts:
@Willy_DuittNov 08.2004 — [i]Originally posted by 15hoursNow [/i]

[B]<script language = "javascript" type="text/javascript">



and what exactly is wrong with this?

nothing wrong with the format that i can see...

no spelling errors... [/B][/QUOTE]

Hmmm;

Obviously there is nothing wrong with it then...

And with that being said, there's nothing wrong with your script neither... :rolleyes:

.....Willy
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — no no no, i fixed it, please help me...

if you compare those validation errors to the actual source on my page, you'll see that none of that stuff is actually there

**** Edit *****

damnit, ok, that crap shows when you view source, but when i'm editing my script, its not there....

"<!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>

<link href="http://us.geocities.com/js_source/div.css" rel="stylesheet" type="text/css"><script language="JavaScript" src="http://us.geocities.com/js_source/div.js"></script><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1099891411" alt="setstats" border="0" width="1" height="1"></noscript>

<IMG SRC="http://geo.yahoo.com/serv?s=19190039&t=1099891411" ALT=1 WIDTH=1 HEIGHT=1>"
Copy linkTweet thisAlerts:
@15hoursNowauthorNov 08.2004 — the only thing that works here is the confirm email, it forces both fields to match, but you can still move to the next field and even submit the form without a valid email address. You can type in one letter and it will still let it go to the next field. Can someone tell me why this script isnt working?

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

<!--

function validateEmail(addr,man,db) {

if (addr == '' && man) {

if (db) alert('email address is mandatory');

return false;

}

var invalidChars = '/' ";:?!()[]{}^|';

for (i=0; i<invalidChars.length; i++) {

if (addr.indexOf(invalidChars.charAt(i),0) > -1) {

if (db) alert('email address contains invalid characters');

return false;

}

}

for (i=0; i<addr.length; i++) {

if (addr.charCodeAt(i)>127) {

if (db) alert("email address contains non ascii characters.");

return false;

}

}

var atPos = addr.indexOf('@',0);

if (atPos == -1) {

if (db) alert('email address must contain an @');

return false;

}

if (atPos == 0) {

if (db) alert('email address must not start with @');

return false;

}

if (addr.indexOf('@', atPos + 1) > - 1) {

if (db) alert('email address must contain only one @');

return false;

}

if (addr.indexOf('.', atPos) == -1) {

if (db) alert('email address must contain a period in the domain name');

return false;

}

if (addr.indexOf('@.',0) != -1) {

if (db) alert('period must not immediately follow @ in email address');

return false;

}

if (addr.indexOf('.@',0) != -1){

if (db) alert('period must not immediately precede @ in email address');

return false;

}

if (addr.indexOf('..',0) != -1) {

if (db) alert('two periods must not be adjacent in email address');

return false;

}

var suffix = addr.substring(addr.lastIndexOf('.')+1);

if (suffix.length != 2 && suffix != 'com' && suffix != 'net' && suffix != 'org' && suffix != 'edu' && suffix != 'int' && suffix != 'mil' && suffix != 'gov' & suffix != 'arpa' && suffix != 'biz' && suffix != 'aero' && suffix != 'name' && suffix != 'coop' && suffix != 'info' && suffix != 'pro' && suffix != 'museum') {

if (db) alert('invalid primary domain in email address');

return false;

}

return true;

}

-->

</script>


</head>

<label>E-mail address <input name="email" onblur="if (!validateEmail(email,1,1)) {

alert('email address is invalid or was not entered');

return false;} " type="text"></label>

<label>Confirm e-mail address <input name="e_mail2" onchange="if (this.value != this.form.email.value) {alert ('Please confirm your email address.'); this.value = ''; this.focus()}" type="text"></label>
Copy linkTweet thisAlerts:
@JPnycNov 08.2004 — else {

return true;

}

Without the else the code at the end will just run after all other code, regardless of what occurs.

Also make sure the call is onsubmit="return validateEmail()" and it's inside the form tag. You should also have an alert box come up onblur of the email txt field so they can't get past it, and it should return focus to the email field.
×

Success!

Help @15hoursNow spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...