943,708 Members | Top Members by Rank

Ad:
Apr 26th, 2005
0

Javascript, Form fields validation and submit

Expand Post »
Hi!
I've a HTML form
I've a function with some parameters that checks the value of each field (it's called within a onBlur event). This function check the type and other restrictions about that field.

I must create a function that checks that all required fields (or options or other kind of form field) are filled (or checked) before submit that form.

I thought to have a global variable where store the validation of each needed field, but I think there must be a better (smarter) way to do the job... and I'm a bit "worried" on fields that are not "editable" like options, checkboxes and so on...

Any suggestion will be appreciated!

TYIA
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dakkar is offline Offline
14 posts
since Apr 2005
Apr 26th, 2005
0

Re: Javascript, Form fields validation and submit

On a large system I helped develop, we had this issue. Customers could order various products for print, and see a real-time PDF of the customized product before they ordered. Each product could have a custom form, and each form element could have custom validation. We didn't find any shortcuts! Sometimes coding is hard work.

Everything was database driven, and the site was written in classic ASP. We had a database table full of JavaScript validation routines we'd built-up over time. When the server script ran, it would make the appropriate event-handler assignments to the proper tags. We would dynamically author a single "validate" routine, and each object that required validation would call this function, passing itself in as a parameter. Based on the parameter/object, it would call the appropration clause in the routine to validate itself.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Apr 26th, 2005
0

Re: Javascript, Form fields validation and submit

When you do the submit call the validation process and loop the form elements. Inside that loop create switch that contains all the form element types your form contains and then process each element based on it's type!

example...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <script>
  3. <!-- //
  4.  
  5. function good_add(eiv)
  6. {
  7. var teste = false;
  8. var strtest = new String(eiv);
  9. var index = strtest.indexOf("@");
  10.  
  11. if (index > 0)
  12. {
  13. var eid = strtest.indexOf(".",index);
  14.  
  15. if (eid > index+1 && strtest.length > eid+1)
  16. {
  17. teste = true;
  18. }
  19.  
  20. return teste;
  21. }
  22. }
  23.  
  24. function validate()
  25. {
  26. var e = '';
  27.  
  28. for (var i = 0; i < document.test.elements.length; i++)
  29. {
  30. var j = document.test.elements[i];
  31.  
  32. switch (j.type)
  33. {
  34. case 'text':
  35.  
  36.  
  37. if (j.name == 'email')
  38. {
  39. if (j.value == '')
  40. {
  41. e += "Please enter a valid email\n";
  42. }
  43. else if (!good_add(j.value))
  44. {
  45. e += "Please enter a valid email\n";
  46. }
  47. }
  48.  
  49. /* other 'input' type elements go here */
  50.  
  51. break;
  52.  
  53. case 'select-one':
  54.  
  55. if (j.name == 'zip' && j.selectedIndex == 0)
  56. {
  57. e += "Please select a valid zip code\n";
  58. }
  59.  
  60. /* other 'select' type elements go here */
  61.  
  62. break;
  63.  
  64. case 'checkbox':
  65.  
  66. if (j.type == 'checkbox' && !j.checked)
  67. {
  68. e += "You must agree to our rules\n";
  69. }
  70.  
  71. /* other 'checkbox' type elements go here */
  72.  
  73. break;
  74. }
  75. }
  76.  
  77. if ( e )
  78. {
  79. alert(e);
  80.  
  81. return false;
  82. }
  83. else
  84. {
  85. /* submit would go here */
  86.  
  87. // document.test.submit();
  88. // return true;
  89.  
  90. alert('thanks for validating our form');
  91.  
  92. return false;
  93. }
  94. }
  95. // -->
  96. </script>
  97.  
  98.  
  99. <form name='test' action='process.php' onsubmit='return validate();' method='post'>
  100. email <input type='text' name='email' value=''>
  101. <br />
  102. zip code <select name='zip'>
  103. <option value=''>Select Zip Code
  104. <option value='33510'>33510
  105. <option value='02112'>02112</select>
  106. <br />
  107. <input type='checkbox' name='agree' value='1'> <small>do you agree with the rules</small>
  108. <br />
  109. <input type='submit' name='submit' value='Send'>
  110. </form>


printf
Reputation Points: 10
Solved Threads: 2
Newbie Poster
demo is offline Offline
18 posts
since Jan 2005
Apr 26th, 2005
0

Re: Javascript, Form fields validation and submit

ok thank you, I think that it's a good solution. I'll try it ;-)

(note: just to let you know my little job: I'm developing a solution that generates a form from a XML Schema file (that supports the fundamental types and structures) and I must have a "client-side" type check before the real submit... )

Thank you friends!
I hope to be able to help you in the future if you need help, obviously! ^_^
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dakkar is offline Offline
14 posts
since Apr 2005
May 12th, 2005
0

Re: Javascript, Form fields validation and submit

I'm wondering if I have a related issue.

I'm creating a form to request credit for customers for various reasons. There may be one reason, or more than one. As a result, I have a top section where the salesman enters in the account number, his ID number, the date, and the amount for the credit. The second section has checkboxes for each reason with a textbox for a detailed explaination. This way, they can select as many reasons as they need to. On the bottom, they enter in the name of the approving manager. Those are required. Optional is the ability to enter their own e-mail address to have the completed form mailed back to themselves, or to e-mail a link to the blank form to someone else.

I need to make sure that the top information (account, sales, date, amount) are filled in, that at least one checkbox is selected, that the textbox associated with that checkbox is filled in, and that there is something in the approval box when the form is submitted.

I want to verify this all client side before it gets submitted to the ASP file that e-mails it.

Would I use a similar method?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Duches77 is offline Offline
7 posts
since May 2005
May 13th, 2005
0

Re: Javascript, Form fields validation and submit

Reputation Points: 10
Solved Threads: 0
Newbie Poster
Duches77 is offline Offline
7 posts
since May 2005
May 13th, 2005
0

Re: Javascript, Form fields validation and submit

Reputation Points: 10
Solved Threads: 0
Newbie Poster
Duches77 is offline Offline
7 posts
since May 2005
May 13th, 2005
0

Re: Javascript, Form fields validation and submit

Had to change a few page references, but the links should all be working now for testing. But, I am definitely still in need of help.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Duches77 is offline Offline
7 posts
since May 2005
May 17th, 2005
0

Re: Javascript, Form fields validation and submit

Nevermind... was able to get help from a coworker...
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Duches77 is offline Offline
7 posts
since May 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Replacing 100% tables with CSS
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Hide all DIV's On Click





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC