/    Sign up×
Community /Pin to ProfileBookmark

Form Validation

Copy linkTweet thisAlerts:
Apr 08.2005

Hi, i have create a simple html form and want validate it just to make sure the user don’t let anything in blank. My simple script for the validation work but there is one problem, suppose the user let everything in blank in the form, when he click submit and error appear next to every field in the form. Now is when the problem occurs suppose he want to fill those field he left in blank and click submit, the error message won’t dissapear. Can anyone help me please and see was wrong with my code. Thanks in advance

Here is the link too [url]http://147.70.30.32/noetse/example.html[/url]

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>

<style>
table{font-weight:bold}
span{color:red}
select { background: #FFFF80; color:black; }
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
}
</style>

</head>

<body onload=”document.myForm.name.focus();”>
<form name=”myForm” onsubmit =”return validate()”>
<fieldset>
<legend>Please enter the following information</legend>

<table width=”100%” border=”0″>
<tr>
<td width=”15%” bgcolor=”#FFFF80″><strong>* Name:</strong></td>
<td width=”20%” bgcolor=”#FFFF80″><input name=”name” type=”text” id=”name” size=”30″></td>
<td width=”32%” id=”name1″>&nbsp;</td>
<td width=”32%”>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Email:</strong></td>
<td bgcolor=”#FFFF80″><input name=”email” type=”text” id=”email” size=”30″></td>
<td id=”email1″>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Address:</strong></td>
<td bgcolor=”#FFFF80″><input name=”address” type=”text” id=”address” size=”30″></td>
<td id=”address1″>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>&nbsp;&nbsp;&nbsp;Address1(optional):</strong></td>
<td bgcolor=”#FFFF80″><input name=”address1″ type=”text” id=”address1″ size=”30″></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* City/State/Zip(11111):</strong></td>
<td nowrap bgcolor=”#FFFF80″> <input name=”city” type=”text” id=”city” size=”10″>
/
<select name=”fl” id=”fl”>
<option>AK</option>
<option>AL</option>
<option>AR</option>
<option>AZ</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DC</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>IA</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>MA</option>
<option>MD</option>
<option>ME</option>
<option>MI</option>
<option>MN</option>
<option>MO</option>
<option>MS</option>
<option>MT</option>
<option>NC</option>
<option>ND</option>
<option>NE</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NV</option>
<option>NY</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PE</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VA</option>
<option>VT</option>
<option>WA</option>
<option>WI</option>
<option>WV</option>
<option>WY</option>
</select>
/
<input name=”zip” type=”text” id=”zip” size=”3″></td>
<td id=”cityandzip”>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Phone:</strong></td>
<td bgcolor=”#FFFF80″><input name=”phone” type=”text” id=”phone”></td>
<td id=”phone1″>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Card Number:</strong></td>
<td bgcolor=”#FFFF80″><input name=”cardnumber” type=”text” id=”cardnumber” maxlength=”16″></td>
<td id=”cardnumber1″>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Card Type:</strong></td>
<td bgcolor=”#FFFF80″><select name=”cardtype” id=”cardtype”>
<option>Visa</option>
<option>Discover</option>
<option>MasterCard</option>
<option>AmericanExpress</option>
</select></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor=”#FFFF80″><strong>* Expiration Date:</strong></td>
<td bgcolor=”#FFFF80″><select name=”month” id=”month”>
<option>Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

<select name=”year” id=”year”>
<option>Year</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select></td>
<td id=”expirationdate1″>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr><td ><input type=”submit” name=”Submit” value=”submit” > <input type=”reset” name=”Reset” value=”Reset”></td>

</table>
<script type=”text/javascript”>
function validate(myForm)
{
if(document.myForm.name.value==””)
{
document.getElementById(‘name1’).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.email.value==””)
{
document.getElementById(’email1′).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.address.value==””)
{
document.getElementById(‘address1’).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.city.value==”” || document.myForm.zip.value==””)
{
document.getElementById(‘cityandzip’).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.phone.value==””)
{
document.getElementById(‘phone1’).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.cardnumber.value==””)
{
document.getElementById(‘cardnumber1’).innerHTML=”<i><span>Incorrect</span></i>”;
}

if(document.myForm.month.value==”Month” || document.myForm.year.value==”Year”)
{
document.getElementById(‘expirationdate1’).innerHTML=”<i><span>Incorrect</span></i>”;
return false;
}
}
</script>

</fieldset>
</form>
</body>
</html>

to post a comment
JavaScript

16 Comments(s) ↴

Copy linkTweet thisAlerts:
@soyunlocoflauthorApr 08.2005 — Thanks a lot. That's perfect
Copy linkTweet thisAlerts:
@BigMoosieApr 08.2005 — [I]Glad to help[/I]
Copy linkTweet thisAlerts:
@BigMoosieApr 08.2005 — // accidental double post
Copy linkTweet thisAlerts:
@soyunlocoflauthorApr 10.2005 — Thanks for helping me but i need help 1 more time. Can anyone please check my code and tell me what's wrong with my email validation. It just to be working when i had the following code:

if(document.myForm.email.value==""){

document.getElementById('email1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}

New Code:

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

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

<html>

<head>

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

<title>Courtesy Of Big Moosie</title>


<script language="JavaScript">

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)

{

return (new Object());

}

window.open = SymWinOpen;

//-->

</script>

<script type="text/javascript">

function validate(myForm){

var validForm=true;

if(document.myForm.name.value==""){

document.getElementById('name1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}

var checkTLD=1;

var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;

var emailPat=/^(.+)@(.+)$/;

var specialChars="()><@,;:".[]";

var validChars="[^s" + specialChars + "]";

var quotedUser="("[^"]*")";

var ipDomainPat=/^[(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})]$/;

var atom=validChars + '+';

var word="(" + atom + "|" + quotedUser + ")";

var userPat=new RegExp("^" + word + "(." + word + ")*$");

var domainPat=new RegExp("^" + atom + "(." + atom +")*$");

var matchArray=myForm.email.value.match(emailPat);

if (matchArray==null) {

document.getElementById('email1').innerHTML="<i><span>Email address seems incorrect</span></i>";

validForm=false;

}

var user=matchArray[1];

var domain=matchArray[2];

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

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

document.getElementById('email1').innerHTML="<i><span>This username contains invalid characters</span></i>";

validForm=false;

}

}

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

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

document.getElementById('email1').innerHTML="<i><span>This domain name contains invalid characters</span></i>";

validForm=false;

}

}

if (user.match(userPat)==null) {

document.getElementById('email1').innerHTML="<i><span>The username doesn't seem to be valid.</span></i>";

validForm=false;

}

var IPArray=domain.match(ipDomainPat);

if (IPArray!=null) {

for (var i=1;i<=4;i++) {

if (IPArray[i]>255) {

document.getElementById('email1').innerHTML="<i><span>Destination IP address is invalid!</span></i>";

validForm=false;

}

}

validForm=true;

}



var atomPat=new RegExp("^" + atom + "$");

var domArr=domain.split(".");

var len=domArr.length;



for (i=0;i<len;i++) {

if (domArr[i].search(atomPat)==-1) {

document.getElementById('email1').innerHTML="<i><span>The domain name does not seem to be valid</span></i>";

validForm=false;

}

}



if (checkTLD && domArr[domArr.length-1].length!=2 &&

domArr[domArr.length-1].search(knownDomsPat)==-1) {

document.getElementById('email1').innerHTML="<i><span>The address must end in a well-known domain or two letter " + "country.</span></i>";

validForm=false;

}



if (len<2) {

document.getElementById('email1').innerHTML="<i><span>This address is missing a hostname</span></i>";

validForm=false;

}



if(document.myForm.address.value==""){

document.getElementById('address1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}



if(document.myForm.city.value=="" || document.myForm.zip.value==""){

document.getElementById('cityandzip').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}



if(document.myForm.phone.value==""){

document.getElementById('phone1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}



if(document.myForm.cardnumber.value==""){

document.getElementById('cardnumber1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}



if(document.myForm.month.options.selectedIndex==0 || document.myForm.year.options.selectedIndex==0){

document.getElementById('expirationdate1').innerHTML="<i><span>Incorrect</span></i>";

validForm=false;

}



return validForm;



}

</script>



<style>

table{font-weight:bold}

span{color:red}

select { background: #FFFF80; color:black; }

body,td,th {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 7.5pt;

}

</style>







</head>



<body onload="var SymTmpWinOpen = window.open; window.open = SymWinOpen; document.myForm.name.focus();; window.open = SymTmpWinOpen;">

<form name="myForm" onsubmit="return validate()">

<fieldset>

<legend>Please enter the following information</legend>



<table width="100%" border="0">

<tr>

<td width="15%" bgcolor="#FFFF80"><strong>* Name:</strong></td>

<td width="20%" bgcolor="#FFFF80"><input name="name" type="text" id="name" size="30" onfocus="document.getElementById('name1').innerHTML='';"></td>

<td width="32%" id="name1">&nbsp;</td>

<td width="32%">&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Email:</strong></td>

<td bgcolor="#FFFF80"><input name="email" type="text" id="email" size="30" onfocus="document.getElementById('email1').innerHTML='';"></td>

<td id="email1">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Address:</strong></td>

<td bgcolor="#FFFF80"><input name="address" type="text" id="address" size="30" onfocus="document.getElementById('address1').innerHTML='';"></td>

<td id="address1">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>&nbsp;&nbsp;&nbsp;Address1(optional):</strong></td>

<td bgcolor="#FFFF80"><input name="address1" type="text" id="address1" size="30"></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* City/State/Zip(11111):</strong></td>

<td nowrap bgcolor="#FFFF80"> <input name="city" type="text" id="city" size="10" onfocus="document.getElementById('cityandzip').innerHTML='';">

/

<select name="fl" id="fl">

<option>AK</option>

<option>AL</option>

<option>AR</option>

<option>AZ</option>

<option>CA</option>

<option>CO</option>

<option>CT</option>

<option>DC</option>

<option>DE</option>

<option>FL</option>

<option>GA</option>

<option>HI</option>

<option>IA</option>

<option>ID</option>

<option>IL</option>

<option>IN</option>

<option>KS</option>

<option>KY</option>

<option>LA</option>

<option>MA</option>

<option>MD</option>

<option>ME</option>

<option>MI</option>

<option>MN</option>

<option>MO</option>

<option>MS</option>

<option>MT</option>

<option>NC</option>

<option>ND</option>

<option>NE</option>

<option>NH</option>

<option>NJ</option>

<option>NM</option>

<option>NV</option>

<option>NY</option>

<option>OH</option>

<option>OK</option>

<option>OR</option>

<option>PE</option>

<option>RI</option>

<option>SC</option>

<option>SD</option>

<option>TN</option>

<option>TX</option>

<option>UT</option>

<option>VA</option>

<option>VT</option>

<option>WA</option>

<option>WI</option>

<option>WV</option>

<option>WY</option>

</select>

/

<input name="zip" type="text" id="zip" size="3" onfocus="document.getElementById('cityandzip').innerHTML='';"></td>

<td id="cityandzip">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Phone:</strong></td>

<td bgcolor="#FFFF80"><input name="phone" type="text" id="phone" onfocus="document.getElementById('phone1').innerHTML='';"></td>

<td id="phone1">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Card Number:</strong></td>

<td bgcolor="#FFFF80"><input name="cardnumber" type="text" id="cardnumber" maxlength="16" onfocus="document.getElementById('cardnumber1').innerHTML='';"></td>

<td id="cardnumber1">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Card Type:</strong></td>

<td bgcolor="#FFFF80"><select name="cardtype" id="cardtype">

<option>Visa</option>

<option>Discover</option>

<option>MasterCard</option>

<option>AmericanExpress</option>

</select></td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td bgcolor="#FFFF80"><strong>* Expiration Date:</strong></td>

<td bgcolor="#FFFF80"><select name="month" id="month" onfocus="document.getElementById('expirationdate1').innerHTML='';">

<option>Month</option>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

<option>11</option>

<option>12</option>

</select>

<select name="year" id="year" onfocus="document.getElementById('expirationdate1').innerHTML='';">

<option>Year</option>

<option>2005</option>

<option>2006</option>

<option>2007</option>

<option>2008</option>

<option>2009</option>

<option>2010</option>

</select></td>

<td id="expirationdate1">&nbsp;</td>

<td>&nbsp;</td>

</tr>



<tr><td ><input type="submit" name="Submit" value="submit" > <input type="reset" name="Reset" value="Reset"></td>



</table>



</fieldset>

</form>

</body>



<script language="JavaScript">

<!--



window.open = SymRealWinOpen;



//-->

</script>



</html><!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://hostingprod.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1112959132" alt="setstats" border="0" width="1" height="1"></noscript>

<IMG SRC="http://geo.yahoo.com/serv?s=76001404&t=1112959132" ALT=1 WIDTH=1 HEIGHT=1>
Copy linkTweet thisAlerts:
@soyunlocoflauthorApr 10.2005 — Please someone help me. I can't figure out what's wrong with that code. Thanks in advance
Copy linkTweet thisAlerts:
@CharlesApr 10.2005 — &lt;script type="text/javascript"&gt;
&lt;!--
String.prototype.isEmailAddress = function () {return /^[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+(?:.[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+)*@[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+(?:.[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+)+$/.test(this)}
// --&gt;
&lt;/script&gt;

&lt;label&gt;E-mail address &lt;input name="email" onchange="if (!this.value.isEmailAddress()) {alert (); this.value = ''}"&gt;&lt;/label&gt;
Copy linkTweet thisAlerts:
@BigMoosieApr 10.2005 — I tried but you have too many things going on and I frankly couldnt be bothered, I hope someone else will for ya buddy ?

EDIT: which charles seems to already, so good!
Copy linkTweet thisAlerts:
@CharlesApr 10.2005 — which charles seems to already, so good![/QUOTE]Well, not exactly. As you wrote, there is so much going on that it's a task to figure out just what is wrong. Instead I simply posted a working example of an e-mail address validation. Note, this example uses the formal definition of a valid e-mail address. If you want other restrictions thay are easily added:

&lt;script type="text/javascript"&gt;
&lt;!--
String.prototype.isEmailAddress = function () {return /^[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+(?:.[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+)*@[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+(?:.[^x00-x20()&lt;&gt;@,;:\".[]x7f-xff]+)+$/.test(this) [b]&amp;&amp; /.(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/.test(this)[/b]}
// --&gt;
&lt;/script&gt;

&lt;label&gt;E-mail address &lt;input name="email" onchange="if (!this.value.isEmailAddress()) {alert (); this.value = ''}"&gt;&lt;/label&gt;
Copy linkTweet thisAlerts:
@soyunlocoflauthorApr 11.2005 — Thanks i will try it right now.
Copy linkTweet thisAlerts:
@BigMoosieApr 11.2005 — Note, this example uses the formal definition of a valid e-mail address.[/QUOTE]

That seems really handy, the only problem is it doesnt allow .com.au or such, coud your provie one that isnt necessarily formal but allows any realy email? I dont care if its easy to cheat like [email][email protected][/email], just as long as it wont block any real ones. That would be really great Charles.
Copy linkTweet thisAlerts:
@soyunlocoflauthorApr 11.2005 — i'm sorry but i do not understand that code, i create a simple html page to test it and all i got was an address email field but it doesn't do anything. Is there something i'm missing or i should put that is not include in the code you provide. Note i don't see any submit botton so how is that code suppose to work. Thanks
Copy linkTweet thisAlerts:
@CharlesApr 11.2005 — That seems really handy, the only problem is it doesnt allow .com.au or such, coud your provie one that isnt necessarily formal but allows any realy email? I dont care if its easy to cheat like [email][email protected][/email], just as long as it wont block any real ones. That would be really great Charles.[/QUOTE]You need to try my first example, above. The enquirer seemed to want those exclusions and so my second example included them.
Copy linkTweet thisAlerts:
@CharlesApr 11.2005 — i'm sorry but i do not understand that code, i create a simple html page to test it and all i got was an address email field but it doesn't do anything. Is there something i'm missing or i should put that is not include in the code you provide. Note i don't see any submit botton so how is that code suppose to work. Thanks[/QUOTE]Those examples validate the field each time it changes. To make it work just enter an invalid address and then focus somewhere else on the page, on the next field, the submit button or just click on anything outside of the box.
Copy linkTweet thisAlerts:
@BigMoosieApr 11.2005 — Charles: your validator allows [email protected], wont c have to always be at least 2 digits long?
Copy linkTweet thisAlerts:
@CharlesApr 11.2005 — Charles: your validator allows [email protected], wont c have to always be at least 2 digits long?[/QUOTE]That RegExp comes directly from the specification, I understand. If it allows for one character there then one character is allowed in an email address.
×

Success!

Help @soyunlocofl 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.17,
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,
)...