Form Vaildation and CSS
I need a validation script that will work with my style sheet.
I want my field lables to change if a form field is missed, for example,
from...
.formelementlabel { color: #000000; font: 10px/11px "Arial Black", Helvetica, Geneva, Swiss, SunSans-Bold; text-transform: uppercase; vertical-align: baseline }
if return false... change style to
.formelementrequiredlabel { color: #FF0000; font: 10px/11px "Arial Black", Helvetica, Geneva, Swiss, SunSans-Bold; text-transform: uppercase; vertical-align: baseline }
...and switch back to baseline style if valid is true
OR
How about a validation script that would hide a field and the field elementlabel and then display another field/elementlabel if the field is missed?
I know, I know, I want everything don't I?
A validator that does not require field names in the script just a "required" statement. "Saving on maintenance"
Like this.....
function IsNull( val )
{
var isValid = false;
if (val+"" == "null")
isValid = true;
return isValid;
} // end IsNull
function IsUndef( val )
{
var isValid = false;
if (val+"" == "undefined")
isValid = true;
return isValid;
} // end IsUndef
function isBlank( str )
{
var isValid = false;
if ( IsNull(str) ¦¦ IsUndef(str) ¦¦ (str+"" == "") )
isValid = true;
return isValid;
} // end IsBlank
// form level validation routine
function validateForm(form) {
var valid = true;
for (var i = 0; i <form.elements.length; i++)
{
var fname = form.elements[i].name;
var ftype=form.elements[i].type;
var ftitle=form.elements[i].title;
var fid=form.elements[i].id;
//alert(ftitle);
if(ftitle=='Required')
{
if ( isBlank(form.elements[i].value) )
{
alert(fid + ' is blank. Please fill out all information to continue.');
return false;
form.elements[i].focus();
}
}
}
return valid;
}
//============================
validateForm(document.forms[0]);
------------------
Step Off
Step Off
Lloyd Hassell posted this at 06:37 — 12th May 2000.
They have: 231 posts
Joined: Feb 2000
I dont know how to change styles dynamically. You can probably do it with IE but I dont think Netscape would let you do it.
I would suggest running your validation script and using an alert() box to tell the user to fill in a field then use the focus() method to highlight the field.
Another suggestion would be to use JavaScript rollovers. You could have blank image next to your fields then light them up if a field has been left out. This would be easy to set up.
:: Lloyd Hassell :: http://www14.brinkster.com/lloydh ::
pagebypage posted this at 21:44 — 12th May 2000.
They have: 6 posts
Joined: May 2000
Could you show me how, I am so-o-o-o spent I couldn't do a mouse-over if I wanted.
I have another question, since you were the only one kind enough to answer, is there a way to refresh a page with out losing form data?
Thanks, Lloyd
Pennie
------------------
Step Off
Step Off
Vincent Puglia posted this at 00:30 — 13th May 2000.
They have: 634 posts
Joined: Dec 1999
Hi Pennie,
Re restoring data:
1)if you have frames, store the information in the parent
2) if you don't,
a) you can create a hidden frame (col=0,rows=0) and store the data there.
in either case, in the form page's body tag, use a onLoad command to call a function that loads the data from the other frame, if present.
3) if you don't want frames, use a cookie.
I also do not know if you can dynamically change styles. You can, however, pop form elements with dHTML. For an example, see the "Hiding Selects within a Form" script at my site.
Hope this helps
Vinny
------------------
GrassBlade: cut&paste javascript
Where the world once stood
the blades of grass cut me still
John Pollock posted this at 06:03 — 13th May 2000.
He has: 628 posts
Joined: Mar 1999
I think in IE (but not NS) you can change the class of something by adding on className='name'. I'm not sure if it is implemented yet, but if it is an IE-based set of viewers it might be worth a try, ie:
document.all.name.style.className='newclassname';
It is in some of the docs I have but may or may not function as of yet.
What Lloyd or Vincent suggested may be the best route though as those methods are more widely used.
[This message has been edited by John Pollock (edited 13 May 2000).]
Java Script: A Beginner's Guide
Page Resource
Lloyd Hassell posted this at 06:08 — 13th May 2000.
They have: 231 posts
Joined: Feb 2000
Is it the light up images (rollover code) you want help with?
If you refresh a page you will lose your data. The form elements will be reset to their default values.
:: Lloyd Hassell :: http://www14.brinkster.com/lloydh ::
pagebypage posted this at 14:14 — 14th May 2000.
They have: 6 posts
Joined: May 2000
Yes, how would I get a light up image to light up once the form is submitted and a field is missed? Keep in mind this is for a domino form. If I can get it to work in html, I can manipulate the script in Domino, problem is, I can't even get it to work in html.
Thanks again, Lloyd.
Pennie
If you refresh a page you will lose your data. The form elements will be reset to their default values.
Step Off
Lloyd Hassell posted this at 06:10 — 15th May 2000.
They have: 231 posts
Joined: Feb 2000
Here is a quick demo for you:
Form Demo
View the source and take what you need.
chicken posted this at 00:38 — 17th May 2000.
They have: 98 posts
Joined: Jan 2000
that is great, would you mind posting a two field form, for the javascriptily challenged? I figure with two fields it should be obvious how to do more. (You might be thinking it is already obvious, but as I said... I'm at a bit javascriptily challenged)
Live Hosting Chat! at http://www.HostHideout.com
Lloyd Hassell posted this at 04:10 — 17th May 2000.
They have: 231 posts
Joined: Feb 2000
chicken: Here ia a multi-field example for you. The old demo has been removed.
Multi Field Form Example
[This message has been edited by Lloyd Hassell (edited 17 May 2000).]
:: Lloyd Hassell :: http://www14.brinkster.com/lloydh ::
chicken posted this at 12:58 — 17th May 2000.
They have: 98 posts
Joined: Jan 2000
thank you sooooooo much! I don't even want to show you what my failed attempts at multiple fields look like. It wasn't that... again- THANKX!
pagebypage posted this at 13:18 — 24th May 2000.
They have: 6 posts
Joined: May 2000
Thanks, so much Llyod, this will work beautifully.
Multi Field Form Example
[This message has been edited by Lloyd Hassell (edited 17 May 2000).]
[This message has been edited by pagebypage (edited 24 May 2000).]
Step Off
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.