?
Solved

Form validation through a hidden field with the required values

Posted on 2003-03-20
8
Medium Priority
?
360 Views
Last Modified: 2012-06-27
Hi all! new here but been lurking a bit already ;)

Here is my problem (mind you i'm starting out on javascript):

I'm making a standard validation script which I can use through all my forms which uses a hidden field called 'required' to check which input fields need to be filled in. I got already to the point (as I said i'm an amateur ;) ) I split the required field in an array and cycle thru it to check if the field is filled in. But I get a rather strange quirk with my first value (name) ... it shows up even if it isn't filled in :s

anyone who could help me out on this one? And as an extension could tell me how to check with radiobuttons, checkboxes and selects?

thcx in advance!

the whole page can be seen at http://www.connections.be/temp/js_testform.htm

the javascript code is:

<script language="JavaScript">
<!--
// JavaScript Document

function Validate_Form(formname){
var x,y
var i,j,k
var MissingField = new Array();

x = eval("document." + formname);
// read Required value and split it into an array
//required_All = Trim(x.required.value);
required_All = x.required.value;
var RequiredArray = required_All.split(",");
i = RequiredArray.length;
// go through the array and check if each field has been filled in
k=0;
for (j = 0; j < i; j++){
y = eval("document." + formname + "." + RequiredArray[j]);
if (y.value == '' || y.value == null){
     MissingField[k] = RequiredArray[j];
     
          k++;
     }
}
// end for
alert(k);
if (k > 0) {
 event.returnValue=false;
for (j = 0; j < k; j++) {
alert(MissingField[j]);
}
}
}
</script>


don't mind the multiple alerts ... its for debugging purposes only atm

any help would be VERY appreciated! :)
0
Comment
Question by:TwEeD
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 

Expert Comment

by:astacom
ID: 8175053

Try renaming the "name" field to "last_name" or "surname" or soemthing other than name.  I don't see "name" listed as a reserved word in my reference, but it might cause some problem.  I grabbed your code and tried it with "last_name" and it worked properly.

Good luck!
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8175360
Try this code...
<HTML>
<head>
<script language="JavaScript">
// JavaScript Document

function Validate_Form(formname){
     var x,y
     var i,j,k=0;
     var MissingField = new Array();

     x = document.forms[formname];
     required_All = x.required.value;
     var RequiredArray =  new Array();
     if(required_All!="")
          RequiredArray = required_All.split(",");
     // go through the array and check if each field has been filled in
     for (j = 0; j < RequiredArray.length; j++){
          if (getFormElementValue(RequiredArray[j],formname) == '')
               MissingField[k++] = RequiredArray[j];
     }
     // end for
     if (k > 0) {
          alert("Missing Fields are: "+MissingField);
          return false;
     }
     return true;
}

function getFormElementValue(elementname,formname)
{
     if(formname==null || elementname==null)
          return null;
     var returnVal = "";
     if(document.forms[formname].elements[elementname].type=="select-one")
          returnVal = document.forms[formname].elements[elementname].options[document.forms[formname].elements[elementname].seelctedIndex].value;
     else if(document.forms[formname].elements[elementname].type=="radio" || document.forms[formname].elements[elementname].type=="checkbox")
          returnVal = getRadioButtonValue(document.forms[formname].elements[elementname]);
     else if(document.forms[formname].elements[elementname].value)
          returnVal = document.forms[formname].elements[elementname].value;
     if(returnVal==null)
          returnVal = "";
     return returnVal;
}

</script>
</head>
<body>
<form name="test">
<input type="hidden" name="required" value="name,age">
<input type="text" name="name">
<input type="text" name="age">
<input type="button" onclick="if(Validate_Form('test')){ document.test.submit(); }">
</form>
</body>
</HTML>
0
 

Author Comment

by:TwEeD
ID: 8179563
First of all thcx a lot to take some time on my problem!!! :)

astacom >> yes it works properly if it isn't named name ... really strange :s But in niteshn's comment it works even when it's named 'name' (which I prefer cause otherwise I'll have to change a lot of asp scripts)

niteshn >> thcx! this code works properly with text input but it still gives me that the select, check & radio's aren't filled in when they are (I used this for for testing :

<form name="test">
<input type="hidden" name="required" value="name,age,selTest,radTest,chkTest">
<input type="text" name="name">
<input type="text" name="age">
<hr>
Test Radial
A<INPUT type="radio" id=radTest name=radTest>
B<INPUT type="radio" id=radTest name=radTest>
C<INPUT type="radio" id=radTest name=radTest><br>
<hr>
Test Checkbox
1<INPUT type="checkbox" id=chkTest name=chkTest>
2<INPUT type="checkbox" id=chkTest name=chkTest>
3<INPUT type="checkbox" id=chkTest name=chkTest><br>
<hr>
Test Select
<SELECT id=selTest name=selTest>
<OPTION></OPTION>
<OPTION>A</OPTION>
<OPTION>B</OPTION>
</SELECT><br>
<input type="button" onclick="if(Validate_Form('test')){ document.test.submit(); }">
</form>

also little typo -> seelctedindex
tried a few thingz but didn't come up with anything working :(

thcx a lot for your help already!

 
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:TwEeD
ID: 8202826
anyone? plz... i'm gettin' rather loco from tryin' to find the prob ...
0
 
LVL 1

Accepted Solution

by:
niteshn earned 360 total points
ID: 8203123
Sorry for the delay. was held up with work! Try this...
<HTML>
<head>
<script language="JavaScript">
// JavaScript Document

function Validate_Form(formname){
    var x,y
    var i,j,k=0;
    var MissingField = new Array();

    x = document.forms[formname];
    required_All = x.required.value;
    var RequiredArray =  new Array();
    if(required_All!="")
         RequiredArray = required_All.split(",");
    // go through the array and check if each field has been filled in
    for (j = 0; j < RequiredArray.length; j++){
         if (getFormElementValue(RequiredArray[j],formname) == '')
              MissingField[k++] = RequiredArray[j];
    }
    // end for
    if (k > 0) {
         alert("Missing Fields are: "+MissingField);
         return false;
    }
    return true;
}

function getFormElementValue(elementname,formname)
{
    if(formname==null || elementname==null)
         return null;
    var returnVal = "";
    var elementType;
    if(document.forms[formname].elements[elementname][0])
         elementType = document.forms[formname].elements[elementname][0].type;
    else
         elementType = document.forms[formname].elements[elementname].type;

    if(elementType=="select-one")
         returnVal = document.forms[formname].elements[elementname].options[document.forms[formname].elements[elementname].selectedIndex].value;
    else if(elementType=="radio" || elementType=="checkbox")
         returnVal = getRadioButtonValue(document.forms[formname].elements[elementname]);
    else if(document.forms[formname].elements[elementname].value)
         returnVal = document.forms[formname].elements[elementname].value;
    if(returnVal==null)
         returnVal = "";
    return returnVal;
}

function getRadioButtonValue(radio)
{
     if(radio==null)
          return "";
     if(radio.checked)
          return radio.value;
     for (var i = 0; i < radio.length; i++)
          if (radio[i].checked)
               return radio[i].value;
     return ""
}


</script>
</head>
<body>
<form name="test">
<input type="hidden" name="required" value="name,age,selTest,radTest,chkTest">
<input type="text" name="name">
<input type="text" name="age">
<hr>
Test Radial
A<INPUT type="radio" id=radTest name=radTest>
B<INPUT type="radio" id=radTest name=radTest>
C<INPUT type="radio" id=radTest name=radTest><br>
<hr>
Test Checkbox
1<INPUT type="checkbox" id=chkTest name=chkTest>
2<INPUT type="checkbox" id=chkTest name=chkTest>
3<INPUT type="checkbox" id=chkTest name=chkTest><br>
<hr>
Test Select
<SELECT id="selTest" name="selTest">
<OPTION></OPTION>
<OPTION value="A">A</OPTION>
<OPTION value="B">B</OPTION>
</SELECT><br>
<input type="button" onclick="if(Validate_Form('test')){ document.test.submit(); }">
</form>
</body>
</HTML>
0
 

Author Comment

by:TwEeD
ID: 8203153
anyone? plz... i'm gettin' rather loco from tryin' to find the prob ...
0
 

Author Comment

by:TwEeD
ID: 8203211
nvm that last comment seems the refresh of the page reposted my comment *oops* :P

And no need for sorry, itz me who should be gratefull as hell for already having someone looking for my prob

And I must say ... it works PERFECTLY!!!

Thcx thcx a LOT!!!

:)

0
 

Author Comment

by:TwEeD
ID: 8203222
I wish I had more points to give you as it helped me A LOT :) (you preserved me from goin' to the looneyhouse ;) :P)

thcx a lot :)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question