Form validation through a hidden field with the required values

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! :)
TwEeDAsked:
Who is Participating?
 
niteshnConnect With a Mentor Commented:
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
 
astacomCommented:

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
 
niteshnCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
TwEeDAuthor Commented:
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
 
TwEeDAuthor Commented:
anyone? plz... i'm gettin' rather loco from tryin' to find the prob ...
0
 
TwEeDAuthor Commented:
anyone? plz... i'm gettin' rather loco from tryin' to find the prob ...
0
 
TwEeDAuthor Commented:
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
 
TwEeDAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.