[SOLVED] Dynamic Form Validation

[chronister]

Hello,

 

I am attempting to do some functional JS scripting. I am not real good with JS, so I am struggling here. I have a PHP form class that dynamically creates the form and then does all the processing. I am trying to add JS validation as an option. The JS validation can be flagged on or off when the class is instantiated.

 

Since this is a form with an unknown number of fields, and unknown field names I have taken this approach....

 

My form class uses a validation array to create server side validation rules. I pass this into the method that creates the meta information (head data) and loop through it to create a JS array of fields that require validation.

 

I end up with this....

<script>
    var required = new Array();
     required[0]="telephone";
     required[1]="email";
     required[2]="hiddenElement";
     required[3]="passwordField";
     required[4]="coolApp";
     required[5]="boxes";
     required[6]="person";
     required[7]="month";
     required[8]="state";
     required[9]="theTextArea";
     required[10]="singleCheck";
     required[11]="uploadFile";
   </script>

 

Then it creates a line that gets added into the form start tag, which passes the required js array into it.

onSubmit="return validateForm(this, required)"

 

The function I am trying go create to do this should check to see if the field is empty (I have 2 functions to mimic PHP's functions empty() and trim() ) and if it is empty, it should change the class name of the parent object. My form is set up like so....

 

<li>
  <label>The Label</label>
  <input name="input" id="input" type="text" />
</li>

 

The li tag is what gets changed, this highlights the whole block to denote an error in that field.

 

here is the functions I am attempting to use.

function checkEmpty(obj) {
 var error=false;
	if(empty(trim(obj.value))) {
	obj.parentNode.className = 'formError';
	error=true;
}else{
	obj.parentNode.className = '';
}
return error;
}
  
function validateForm(obj, requiredFields) {
var errors="";
for($i=0; $i < requiredFields.length; $i++){
	var theField=document.getElementById(requiredFields[$i]);
	errors = checkEmpty(theField)
}
return false;
}

 

My form still submits and my server side validation kicks in. What am I doing wrong here that is making the validateForm function return true and make the form submit. It seems that there is a problem within the for loop. It seems that this line

obj.parentNode.className = 'formError';

is causing the problem.

 

Any help would be appreciated.

 

Thanks,

 

Nate

[chronister]

Can anyone help me here??

 

What triggers the "true" return value?

 

Is it this line?

obj.parentNode.className = 'formError';

 

I am trying to understand what forces the form to submit to the server. I have looked at many tutorials regarding this, and they do it in a very similar way.

 

A more condensed version of what I need is ... how do I take a js array and run it through a for loop and change the parentNode className when there is an error without triggering a "return true" on the validateForm function??

 

Please assist me.

 

Thanks,

 

Nate

[chronister]

I have determined that there was nothing wrong with my particular function, it was just hitting items (radio buttons and checkboxes) that could not be validated in that manner and then kicking in the return value forcing my form to submit.

 

So now I need to figure out what type of form object the current item is, so I can validate it properly. As is stated, this is a dynamically created form so I have no way of knowing before hand what type of form object is being checked without adding additional items in my validation rules, and I don't want to do that because it is mostly un-necessary.

 

So I have figured out that I can use the .type object to determine the type of some form elements, but when it comes to radio buttons, or checkboxes, it does not work.

 

So how do I determine the type of radio or checkbox in the form?

 

Please someone help me on this one. I am getting there, and learning a decent amount about JS in the process

 

Nate

[chronister]

I am marking this solved even though it is not. I am going to struggle on my own with this as it seems no one can help me with this, or no one wants to attempt to help me with this.

 

Very frustrating when I offer lots of help on this forum, and when I request some help I very rarely get it.

 

Nate