HTML, JavaScript And CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > HTML, JavaScript And CSS Help
Reload this Page

Form Validation Highlight Field in CSS

Discuss Form Validation Highlight Field in CSS in the HTML, JavaScript And CSS Help forum on ASP Free.
Form Validation Highlight Field in CSS HTML Help forum discussing HTML, DHTML, XHTML, and JavaScript languages for web development, including CSS style sheet coding. All aspects of website development are covered here.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old November 2nd, 2004, 10:19 AM
jbruso jbruso is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 279 jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 2 Days 17 h 31 m 46 sec
Reputation Power: 5
Send a message via AIM to jbruso Send a message via MSN to jbruso Send a message via Yahoo to jbruso
Form Validation Highlight Field in CSS
Hi Guys,

I've tried several different variations of code, but I'm just not astute enough with JavaScript to figure this out. I have form Validation in javascript that is working great. Now, I'd like to simply do two things:

1. Popup the alert message with the missing fields. (<-- I have this working)
2. Highlight each missing field in red (CSS) (<-- No idea where to begin with this)

Validation Script:

Code:
 <script>
function validateForm() {
with (document.myform) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (h.value == "") alertMsg += "\nYour First Name";
if (j.value == "") alertMsg += "\nYour Last Name";
if (SSfirst.value == "") alertMsg += "\nThe first 3 digits of your Social Security";
if (SSsecond.value == "") alertMsg += "\nThe second 2 digits of your Social Security";
if (SSthird.value == "") alertMsg += "\nThe last 4 digits of your Social Security";
if (m.value == "") alertMsg += "\nStreet / P.O. Box";
if (n.value == "") alertMsg += "\nCity";
if (o.value == "") alertMsg += "\nState";
if (p.value == "") alertMsg += "\nZIP";
if (from.value == "") alertMsg += "\nYour e-Mail Address";
if (r.value == "") alertMsg += "\nYour Phone Number";
radioOption = -1;
for (counter=0; counter<s.length; counter++) {
if (s[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nAre you Male or Female?";
if (t.value == "") alertMsg += "\nYour Birth Date";
radioOption = -1;
for (counter=0; counter<v.length; counter++) {
if (v[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nAre you Married, Single or a Single Parent?";
if (w.value == "") alertMsg += "\nNumber in Household.";
if (x.value == "") alertMsg += "\nGross Income.";
if (y.value == "") alertMsg += "\nYour Major.";
for (counter=0; counter<z.length; counter++) {
if (z[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nFirst time student?";
if (f.value == "") alertMsg += "\nYear to enroll.";
for (counter=0; counter<aa.length; counter++) {
if (aa[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nCollege Standing?";
for (counter=0; counter<ac.length; counter++) {
if (ac[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nWill you complete a FAFSA?";
if (ae.value == "") alertMsg += "\nG.P.A.";
 
for (counter=0; counter<u.length; counter++) {
if (u[counter].checked) radioOption = counter;
}
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
 
return false;
} else {
return true;
} 
} }
</script>
Reply With Quote
  #2  
Old November 2nd, 2004, 11:31 AM
jbruso jbruso is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 279 jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 2 Days 17 h 31 m 46 sec
Reputation Power: 5
Send a message via AIM to jbruso Send a message via MSN to jbruso Send a message via Yahoo to jbruso
k, I'm getting sooooo close... now, I'm just not sure how to control the style property?? Instead of hiding the field, I want to put a border around it or color it somehow...

Any ideas??


Code:
 <script>
function validateForm() {
with (document.myform) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (h.value == "") alertMsg += "\nYour First Name";
{h.style.visibility='hidden'};
if (j.value == "") alertMsg += "\nYour Last Name";
if (SSfirst.value == "") alertMsg += "\nThe first 3 digits of your Social Security";
if (SSsecond.value == "") alertMsg += "\nThe second 2 digits of your Social Security";
if (SSthird.value == "") alertMsg += "\nThe last 4 digits of your Social Security";
if (m.value == "") alertMsg += "\nStreet / P.O. Box";
if (n.value == "") alertMsg += "\nCity";
if (o.value == "") alertMsg += "\nState";
if (p.value == "") alertMsg += "\nZIP";
if (from.value == "") alertMsg += "\nYour e-Mail Address";
if (r.value == "") alertMsg += "\nYour Phone Number";
radioOption = -1;
for (counter=0; counter<s.length; counter++) {
if (s[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nAre you Male or Female?";
if (t.value == "") alertMsg += "\nYour Birth Date";
radioOption = -1;
for (counter=0; counter<v.length; counter++) {
if (v[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nAre you Married, Single or a Single Parent?";
if (w.value == "") alertMsg += "\nNumber in Household.";
if (x.value == "") alertMsg += "\nGross Income.";
if (y.value == "") alertMsg += "\nYour Major.";
for (counter=0; counter<z.length; counter++) {
if (z[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nFirst time student?";
if (f.value == "") alertMsg += "\nYear to enroll.";
for (counter=0; counter<aa.length; counter++) {
if (aa[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nCollege Standing?";
for (counter=0; counter<ac.length; counter++) {
if (ac[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\nWill you complete a FAFSA?";
if (ae.value == "") alertMsg += "\nG.P.A.";
 
for (counter=0; counter<u.length; counter++) {
if (u[counter].checked) radioOption = counter;
}
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
 
return false;
} else {
return true;
} 
} }
</script>
Reply With Quote
  #3  
Old November 2nd, 2004, 02:57 PM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
Click here for more information.
  
Join Date: Sep 2004
Location: Israel
Posts: 27,003 Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)  Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 1 Week 5 Days 17 h 17 m
Reputation Power: 1572
create proper css class, for example:
.text2{color: red;}
and have such javascript:
h.class = "text2";
that should change the css class dynamically.
Reply With Quote
  #4  
Old November 2nd, 2004, 04:53 PM
jobo jobo is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Oct 2004
Posts: 141 jobo User rank is Corporal (100 - 500 Reputation Level)jobo User rank is Corporal (100 - 500 Reputation Level)jobo User rank is Corporal (100 - 500 Reputation Level)jobo User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 23 h 11 m 14 sec
Reputation Power: 5
Question
Is there a way to accomplish this with validation controls? Perhaps can a user-defined control inherit the basic required field validator, and add the css work to change the font of the associated text?
Reply With Quote
  #5  
Old November 3rd, 2004, 01:56 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
Click here for more information.
  
Join Date: Sep 2004
Location: Israel
Posts: 27,003 Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 9th Grade (Above 100000 Reputation Level)  Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342958 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 1 Week 5 Days 17 h 17 m
Reputation Power: 1572
this post is for the .NET forum... anyhow, there is no escape from using custom javascript code. I believe you can put it inside custom Validaor class that you create without any special problem.
Reply With Quote
  #6  
Old November 3rd, 2004, 10:48 AM
jbruso jbruso is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 279 jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level)jbruso User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 2 Days 17 h 31 m 46 sec
Reputation Power: 5
Send a message via AIM to jbruso Send a message via MSN to jbruso Send a message via Yahoo to jbruso
Completed Code
Well,

I got it workin fairly well... Thought I'd post it if anyone else might like to use it:

Javascript Field Change Called via: <!-- #include virtual="/includes/validate.js" -->
Code:
 <!-- ====================== BEGIN Form Validation Replace Class w/ New Color -->
<script language="JavaScript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<!-- ====================== END Form Validation Replace Class w/ New Color -->


Style Sheet for the change Called via: <link rel="STYLESHEET" type="text/css" href="/global.css">
Code:
 .field {
border: 1px outset #FF0000;
color: #660000;
background-color: #FFCCFF;
font-weight: bold;
}
.field2 {
border: 2px inset #FF0000;
color: #660000;
font-weight: bold;
}


Javascript validation and field change requests:
Code:
 <script>
function validateForm() {
with (document.myform) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (h.value == "") 
{alertMsg += "\nYour First Name" 
change('changemeh','field') + h.focus()};
if (j.value == "") 
{alertMsg += "\nYour Last Name" 
change('changemej','field') + j.focus()};
if (SSfirst.value == "") 
{alertMsg += "\nThe first 3 digits of your Social Security" 
change('changemeSSfirst','field') + SSfirst.focus()};
if (SSsecond.value == "") 
{alertMsg += "\nThe second 2 digits of your Social Security"
change('changemeSSsecond','field') + SSsecond.focus()};
if (SSthird.value == "") 
{alertMsg += "\nThe last 4 digits of your Social Security"
change('changemeSSthird','field') + SSthird.focus()};
if (m.value == "") 
{alertMsg += "\nStreet / P.O. Box"
change('changemem','field') + m.focus()};
if (n.value == "") 
{alertMsg += "\nCity" 
change('changemen','field') + n.focus()};
if (o.value == "") 
{alertMsg += "\nState" 
change('changemeo','field') + o.focus()};
if (p.value == "") 
{alertMsg += "\nZIP" 
change('changemep','field') + p.focus()};
if (from.value == "") 
{alertMsg += "\nYour e-Mail Address" 
change('changemefrom','field') + from.focus()};
if (r.value == "") 
{alertMsg += "\nYour Phone Number"
change('changemer','field') + r.focus()};
 
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
 
return false;
} else 
{
return true;
} 
} }
</script>


Form:
Code:
 <form action="page2.asp" name="myform" method="post">
<TABLE width="100%" border="0" cellpadding="3" cellspacing="3">
<TR><TD rowspan="3"><img src="/images/spacer.gif" width="10" height="1" border="0"></TD>
</TR>
<TR>
<TD valign="top">
<!-- Begin BOX -->
	 <P>
	 <table width="200" border="0" cellspacing="0" cellpadding="0">
	 <tr>
	 <td><img src="/images/box_a.gif" width="8" height="8" border="0"></td>
	 <td valign="top"><img src="/images/box_grey_space.gif" width="239" height="1" border="0"></td>
	 <td><img src="/images/box_b.gif" width="8" height="8" border="0"></td>
	 </tr>
	 <tr>
	 <td align="left"><img src="/images/box_grey_space.gif" width="1" height="200" border="0"></td>
	 <td valign="top">
	 <!-- BOX CONTENT -->
	 <table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
				 <td colspan="2"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Full Name</strong><BR><img src="/images/spacer.gif" width="1" height="10" border="0">
	 </font></td>
				</tr>
<TR>
	<TD align="right">First:</TD>
	<TD><input name="h" type="text" size="18" id="changemeh"></TD>
</TR>
<TR>
	<TD align="right">Middle:</TD>
	<TD><input name="i" type="text" size="18"></TD>
</TR>
<TR>
	<TD align="right">Last:</TD>
	<TD><input name="j" type="text" size="18" id="changemej"></TD>
</TR>
<TR>
	<TD align="right">Maiden:</TD>
	<TD><input name="k" type="text" size="18"></TD>
</TR>
<TR>
	<TD align="right"><font size="1">Social Security:</font></TD>
	<TD><input id="changemeSSfirst" type="text" name="SSfirst" size=1 onKeyup="autotab(this, document.myform.SSsecond)" maxlength=3 > - 
	<input type="text" name="SSsecond" size=1 onKeyup="autotab(this, document.myform.SSthird)" maxlength=2 id="changemeSSsecond"> - 
	<input type="text" name="SSthird" size=1 maxlength=4 id="changemeSSthird"></TD>
</TR>
<TR>
	<TD><img src="/images/spacer.gif" width="80" height="1" border="0"></TD>
	<TD><img src="/images/spacer.gif" width="145" height="1" border="0"></TD>
</TR> 
</table>
	 <!-- End BOX CONTENT -->
		</td>
	 <td align="right"><img src="/images/box_grey_space.gif" width="1" height="200" border="0"></td>
	 </tr>
	 <tr>
	 <td><img src="/images/box_c.gif" width="8" height="8" border="0"></td>
	 <td valign="bottom"><img src="/images/box_grey_space.gif" width="239" height="1" border="0"></td>
	 <td><img src="/images/box_d.gif" width="8" height="8" border="0"></td>
	 </tr>
	 </table>
	 <!-- END BOX -->
</TD>
<TD align="right" valign="top">
	<!-- Begin BOX -->
	 <P>
	 <table width="400" border="0" cellspacing="0" cellpadding="0">
	 <tr>
	 <td><img src="/images/box_a.gif" width="8" height="8" border="0"></td>
	 <td valign="top"><img src="/images/box_grey_space.gif" width="400" height="1" border="0"></td>
	 <td><img src="/images/box_b.gif" width="8" height="8" border="0"></td>
	 </tr>
	 <tr>
	 <td align="left"><img src="/images/box_grey_space.gif" width="1" height="200" border="0"></td>
	 <td valign="top">
	 <!-- BOX CONTENT -->
	 <table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
				 <td colspan="2"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Contact Information</strong><BR><img src="/images/spacer.gif" width="1" height="10" border="0">
	 </font></td>
				</tr>
<TR>
	<TD align="right">Street / P.O. Box:</TD>
	<TD><input name="m" type="text" size="37" id="changemem"></TD>
</TR>
<TR>
	<TD align="right">City:</TD>
	<TD><input name="n" type="text" size="10" id="changemen"> &nbsp; ST: <input name="o" type="text" size="2" maxlength="2" id="changemeo"> &nbsp;ZIP: <input name="p" type="text" size="3" maxlength="5" id="changemep"></TD>
</TR>
<TR>
	<TD align="right">Your e-Mail Address:</TD>
	<TD><input name="from" type="text" size="37" id="changemefrom"></TD>
</TR>
<TR>
	<TD align="right">Your Phone Number:</TD>
	<TD><input name="r" type="text" size="37" id="changemer"></TD>
</TR>
<tr>
<td align="right" class="form_normal">Country:</td>
<td class="form_normal"><input name="country" type="text" value="United States" size="37"></td>
		 </tr>
<TR>
	<TD><img src="/images/spacer.gif" width="80" height="1" border="0"></TD>
	<TD><img src="/images/spacer.gif" width="135" height="1" border="0"></TD>
</TR> 
</table>
	 <!-- End BOX CONTENT -->
		</td>
	 <td align="right"><img src="/images/box_grey_space.gif" width="1" height="200" border="0"></td>
	 </tr>
	 <tr>
	 <td><img src="/images/box_c.gif" width="8" height="8" border="0"></td>
	 <td valign="bottom"><img src="/images/box_grey_space.gif" width="400" height="1" border="0"></td>
	 <td><img src="/images/box_d.gif" width="8" height="8" border="0"></td>
	 </tr>
	 </table>
	 <!-- END BOX -->
	 </TD>
</TR>
</TABLE>
Reply With Quote
Reply

Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > Form Validation Highlight Field in CSS

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.