Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

Multiple Form Field Types Validation Routine

This may seem dumb, but I want to do a loop through all the elements in a form I have, but since the select and radio are arrays, I can't figure out how to do it simply. I can do it with brute force, but I am looking for the elegant, efficient solution.

Here's what I'm starting with:

//there's only one form

function formValidate(form){
    for (i=0; i<form.elements.length; i++){
        var element = form.elements[i];
        //herei's where I want the elegant design...
       // it would be easy to just write and endless bunch of if statements
       // but I want to be true to OOP and call seperate functions for each type of work to be done
      // I've got text fields
      // I've got text area fields
      // I've got select fields
      // I've got radio button group fields
      // I've got checkbox fields
      // and for this particular problem, I jsut want to make sure everything either has a value or was clicked, or selected, since the form is initially blank with text fields having the "" value, textareas having "" value, radio button groups with no button default selected, checkboxes (well they are optional so don't need to be covered, but wold like to see how it's done anyway), and finally select options with the selected attribute set to value set to "PS" for --Please Select--.

I know this probably easy for a vetran, but I've only been doing javacript for about 2 months and I am pulling my hair out. I've written the code about 50 different ways. I always end up delted it becuase it seems way to complicated (though they all work). Here's what I envision it looking like:

function formValidate(form){
    for (i=0; i<form.elements.length; i++){
        var element = form.elements[i];
        switch(element){
         case element.type = "text":
           isEmpty(element);
           isValid(element.value);
          break;
          case element.type = "textarea":
          isEmpty(element);
          isValid(element.value);
          break;
          case element.type = "radio":
          isChecked(element);
          // a bonus here would be to make sure the url could be passed parameter values that are not in the radio group choices
          break;
          case element.type = "checkbox":
          isChecked(element);
          // a bonus here would be to make sure the url could be passed parameter values that are not in the radio group choices
          break;
           case element.type = "selected":
           // a bonus here would be to make sure the url could be passed parameter values that are not in the radio group choices
          isSelected(element);
          break;

        }//somehow make sure the person can't go on until the missing value or incorrect value is entered.

   }

//with the functions something like this
function  isEmpty(element){
   if(element.value == ""){
      element.focus();
      element.backgroundColor = "#XXXXXX";
      alert("You have forgotten to fill out the "+elment.name+" question.");
      return false;
      }else{
       element.backgroundColor = "#FFFFFF";
       return true;
      }
}

I know there has to be a way to do it efficient and elegant. Please help.
0
resonate
Asked:
resonate
  • 6
  • 3
1 Solution
 
gops1Commented:
Hi Reson,

I am just pasting a sample validation loop. Just have a look may be its useful:

for(i=0;i<document.formname.length;i++){
      if(document.formname.elements[i].type.indexOf("select")!=-1){
            if(document.formname.elements[i].selectedIndex==0 ||document.formname.elements[i].selectedIndex==-1){
                  alert("choose");
                  return false;
            }
      }
      
      if(document.formname.elements[i].type=="radio"){
            //check the radio length
            var checkRadioLen=document.formname.elements[i].length;
            var errFlag=false;
            if(checkRadioLen!=undefined){
                  for(r=0;r<checkRadioLen;r++){
                        if(document.formname.elements[i][r].checked){
                              errFlag=true;
                              break;
                        }else{
                              errFlag=false;
                        }
                  }
                  if(errFlag){
                        return true;
                  }else{
                        alert("please choose");
                        return false;
                  }
            }else{
                  if(!document.formname.elements[i].checked){
                        alert("please choose");
                        return false;
                  }else{
                        return true;
                  }
            }
      }
      
      if(document.formname.elements[i].type=="checkbox"){
            //check the radio length
            var checkCheckLen=document.formname.elements[i].length;
            var errCFlag=false;
            if(checkCheckLen!=undefined){
                  for(r=0;r<checkCheckLen;r++){
                        if(document.formname.elements[i][r].checked){
                              errCFlag=true;
                              break;
                        }else{
                              errCFlag=false;
                        }
                  }
                  if(errFlag){
                        return true;
                  }else{
                        alert("please choose");
                        return false;
                  }
            }else{
                  if(!document.formname.elements[i].checked){
                        alert("please choose");
                        return false;
                  }else{
                        return true;
                  }
            }
      }
      
      
      if(document.formname.elements[i].type=="input"){
            if(document.formname.elements[i].value.length<=0){
                  alert("Please enter some value");
                  return false;
            }
      }
      
}
0
 
resonateAuthor Commented:
Hey jops1,

Thanks for the post. I have been doing it that way (well similar) and I was hoping for a more modularized or object oriented solution. Maybe it isn't worth if for people becuse it doesn't take that long to write up what you just posted (or what I've been writing). I just have this vision in my mind of a super efficient, object oriented way. That just calls speciality functions (that can be reused for other projects)... I know your above solution can be resused, but I want to break it down even further.

I appreciate your input.

resonate
0
 
resonateAuthor Commented:
The other thing that is messing me up is the select form fields. It is an array of options. So all the ways you can address things from the loop (in my case document.form[0].element[i]) doesn't seem to work with the select type of input and further, there is no "type" for the select tag, nor the options it contains. So I can't test for type as you show in your sample post. See why I am having such a headache? This is why I want to seperate everything. I want a function for just select/option fields, AND a way to identify them from the main loop and I want to do the same for each other form input type. The only other one that is giving me grief in relation to the whole script is the radio, since, when I use the //document.form[0].elements[i]//naming methodology it gives me each individual radio button, instead of giving me the group.

So I guess (in writing all this and seeing your answer) that what I really want is two stand alone functions that can be implemented or called from within the main elements[i] loop. One for select/option and one for the radio group, both testing wether there is anything selected(since the form is truly blank with no default selected). They have to able to be addressed from the main elements[i] loop. So maybe this is just a simple addressing issue.
0
Industry Leaders: 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!

 
resonateAuthor Commented:
Also jops1,

Your script assumes one select field and uses the name of the select field group. I want something generic that can find any select group from within the main looping elements[i] loop. I actually only have 4 select/option fields and could easily put thier names in the script, but I don't want to hardwire one single thing, other than the begining arguments.

See what I mean??
0
 
indu_mkCommented:
see this  http://groups.yahoo.com/group/validation
you will get a script which does all these there.
0
 
resonateAuthor Commented:
indu_mk,

I don't have time to search the entire forum, could be more specific, address to that post you are speaking of?
0
 
indu_mkCommented:
u can join that group and download the validation.js from the files section.
0
 
resonateAuthor Commented:
thanks. I'll have to join later. Is this your group?
0
 
indu_mkCommented:
no, i am a member of that.
0
 
resonateAuthor Commented:
indu,

I really didn't feel like signing up for an account on Yahoo, just to take a look at a script, especially since I came here for that...HOWEVER, it is exactly what I was looking for. Exactly what I had envisioned. That Matthew Frank script is available elsewhere on the net. But since you led me to it (in a round about way), you get the points.

Thank you for pointing me in the right direction.

resonate
0

Featured Post

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!

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now