using javascript for data entry validation

[wbodger]

I have a page that builds form from some pre-defined columns in a database. Some of the form fields have server side data validation, but I would like to have javascript client side validation just to check that they entered data for each required field. Now, the database does tell the page whether or not the field is required, but the pages are completely dynamic, built on the fly from the database every time for every form. So, I am trying to figure out what it would look like to build a javascript data entry checking function that would simply make sure there is data in each required field before it allows a submit. The scripting that builds the pages is all classic asp/vbscript. Any thoughts?

wb

 

[vacunita]

Generically speaking you would need to have some identifier set for the form fields that you want to validate. Run a function that gets all the items and checks that there is something in them.

You can have the function run on the onSubmit event of the form, or on the blur even of each input. That is when the user clicks away from an input.

It should not be to hard if you have someway for JS to identify that the fields are required, and what is required for them, or if they just need to be filled in with something regardless of what it is.

In pseudo Code

[b][COLOR=#0000FF]var[/color][/b] formElements [COLOR=#990000]=[/color] document[COLOR=#990000].[/color]forms[COLOR=#990000].[/color]formname[COLOR=#990000].[/color]elements[COLOR=#990000];[/color]
[b][COLOR=#0000FF]var[/color][/b] requiredOk [COLOR=#990000]=[/color] [b][COLOR=#0000FF]true[/color][/b][COLOR=#990000];[/color]
 [b][COLOR=#0000FF]for[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]var[/color][/b] i[COLOR=#990000]=[/color][COLOR=#993399]0[/color][COLOR=#990000];[/color]i[COLOR=#990000]<=[/color]formElements[COLOR=#990000].[/color]length[COLOR=#990000];[/color]i[COLOR=#990000]++)[/color]
 [COLOR=#FF0000]{[/color]
   [b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color]formElements[COLOR=#990000][[/color]i[COLOR=#990000]].[/color]getAttribute[COLOR=#990000][[/color][COLOR=#FF0000]'required'[/color][COLOR=#990000]][/color] [COLOR=#990000]==[/color] [b][COLOR=#0000FF]true[/color][/b][COLOR=#990000])[/color]
   [COLOR=#FF0000]{[/color]
[tab] [b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color]formElements[COLOR=#990000][[/color]i[COLOR=#990000]].[/color]value [COLOR=#990000]!=[/color] [COLOR=#FF0000]''[/color][COLOR=#990000])[/color]
[tab] [COLOR=#FF0000]{[/color]
[tab]   requiredOk [COLOR=#990000]=[/color] [b][COLOR=#0000FF]false[/color][/b][COLOR=#990000];[/color]
[tab] [COLOR=#FF0000]}[/color]
   [COLOR=#FF0000]}[/color]
 [COLOR=#FF0000]}[/color]
  [b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color]requiredOk [COLOR=#990000]==[/color] [b][COLOR=#0000FF]false[/color][/b][COLOR=#990000])[/color]
  [COLOR=#FF0000]{[/color]
   [b][COLOR=#000000]alert[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]"Required Fields must be filled in"[/color][COLOR=#990000]);[/color]
  [COLOR=#FF0000]}[/color]
 [b][COLOR=#0000FF]return[/color][/b] requiredOk[COLOR=#990000];[/color]
[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[wbodger]

That makes sense, I will work on getting that into our current format. Thanks!

wb

 

[1DMF]

If you use JQuery it's worth looking into the JQuery validation plugin..

check out this link for a brief overview and demo

http://www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads