Stuck (once again) on Form Validation

  • Thread starter madmatt
  • https://www.osnn.net/admin.php?templates/thread_view.1970/delete&_xfRedirect=https%3A%2F%2Fwww.osnn.net%2Fadmin.php%3Ftemplates%2Foutdated Start date

madmatt

Awesome is as awesome does.
Political Access
Joined
5 Apr 2002
Messages
13,314
Here's what I would like to do.

I have a form with the following fields (* = required):

Contact Name (at least 8 characters) *
Company Name
Street Address (at least 8 characters) *
City (at least 5 characters) *
State (select box) *
Zip (5 digits - numbers only) *
Phone (10 characters) *
Fax (10 characters)
Email (check format) *
Message (at least 8 characters) *

To Start
All labels start in black.

Data Input - Valid Data
Label remains black if the data is valid.

Data Input - Invalid Data
Label changes to red if the data is invalid.

If they press submit and all the data is valid then the form transmits. If the data is not valid then an alert will appear.

If anyone knows of a tutorial, a book (available to purchase), or even a tutor/helper (I will pay you for your time) that would guide me in the right direction then please post and let me know.

Thank you.
 

kcnychief

??? ??? ?
Political Access
Joined
8 Apr 2005
Messages
16,950
Maybe a silly question but what language are you trying to do this in? I would assume .ASP or PHP?
 

madmatt

Awesome is as awesome does.
Political Access
Joined
5 Apr 2002
Messages
13,314
PHP, but if it can be done with DHTML/JavaScript then it can be applied towards ASP as well.
 

madmatt

Awesome is as awesome does.
Political Access
Joined
5 Apr 2002
Messages
13,314
Yes, but I don't want to use alert boxes. I am currently using those and I dislike them (annoying at best). I want to learn how to change the text color of the label and use "onChange" or something similar.
 

Khayman

I'm sorry Hal...
Political Access
Joined
6 Jan 2002
Messages
5,518
well the page was mostly meant to show some validation methods, not just to copy wholesale.

change the event to OnChange (or OnLostFocus)

instead of sending the alert the its something like document.textboxname.className = "failed";

className is a css class, with its text box style set to red or whatever
or set the style property document.textboxname.style.property="background-color: red"

(the code is just examples, i haven't looked up exact syntax.
w3schools is a good place to learn
http://www.w3schools.com/js/
 

madmatt

Awesome is as awesome does.
Political Access
Joined
5 Apr 2002
Messages
13,314
Okay, I understand so far.

How do I change the style property for a <label>?

I am using <label for="phoneNumber"> ... etc.

document.???.className='invalid';
 

Geffy

OSNN Veteran Addict
Joined
18 Mar 2002
Messages
7,805
I would not recommend changing the label

I typically have this as a form element

<input type="text" name="firstname" id="firstname" size="30"/>

you can then have a javascript on submit which checks the fields, say you have in the validation script a mapping of field ids to validation functions, or maybe a switch case, whatever you choose it doesnt really matter.

If you find an error you can just do
document.getElementById('firstname').className = 'invalid'

If you are using maybe the Prototype javascript library then this can be boiled down to

$('firstname').className = 'invalid'

Also you are going to need to have your validation on the server side as well, so it may well be an idea to just write the validation on the server side then use XmlHttpRequest to validate on the client side using your server side code. Means you only need to have your validation code in one place.
 

GEN3RIC

OSNN Senior Addict
Joined
4 Apr 2005
Messages
634
1 vote for ASP.NET 2.0 .. i love me some Visual Studio!
 

Geffy

OSNN Veteran Addict
Joined
18 Mar 2002
Messages
7,805
1 vote for ASP.NET 2.0 .. i love me some Visual Studio!

I take it you really like amazingly useless __doPostBack crap that MS decided to use *everywhere*. I wouldn't mind it if it degraded well with Javascript turned off but it doesn't, it just doesnt work at all.
 

GEN3RIC

OSNN Senior Addict
Joined
4 Apr 2005
Messages
634
I take it you really like amazingly useless __doPostBack crap that MS decided to use *everywhere*. I wouldn't mind it if it degraded well with Javascript turned off but it doesn't, it just doesnt work at all.
I haven't run into any issues - but I could see where it could cause them..
 

albybum

Penguin Rancher
Joined
9 Feb 2002
Messages
281
This is a bit brute force, but see if this helps.

Code:
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function validateForm()
{
 var e;
 // Validate Contact Name
 e = document.getElementById("txtContactName");
 // if bad length, set error 
 if (e.value.length < 8)
 {
  document.getElementById("lblContactName").style.color="#FF0000";
  document.getElementById("frmContactErrors").innerHTML = "Contact name must contain 8 characters";
  return;  // exit validation on error
 } 
 else // otherwise, clear any old errors
 {
  document.getElementById("lblContactName").style.color="#000000";
  document.getElementById("frmContactErrors").innerHTML = "";
 }
 
 // todo: other textbox validation
   
 // assume if we got this far, there were no errors, so submit
 document.frmContact.submit();
}
</script>
</head>
<body>
 
<form name="frmContact" id="frmContact" method="post" action="someurl.php" onsubmit="validateForm();">
<label id="lblContactName" for="txtContactName">Contact Name</label>
<input id="txtContactName" name="txtContactName" type="text" value="" onchange="validateForm();" />
<br />
<label id="lblCompanyName" for="txtCompanyName">Company Name</label>
<input id="txtCompanyName" name="txtCompanyName" type="text" value="" onchange="validateForm();" />
<br />
<input type="button" value="Submit!" onclick="validateForm();" />
</form>
<div id="frmContactErrors"><!-- --></div>
</body>
</html>
 

Members online

No members online now.

Latest forum posts

Latest profile posts

Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.
Terrahertz wrote on Electronic Punk's profile.
Yo fellas!
Electronic Punk wrote on Sazar's profile.
Where are you buddy?

Forum statistics

Threads
62,000
Messages
673,429
Members
5,596
Latest member
Joshua Liansky