...

View Full Version : validate a dynamic form



miranda
01-31-2007, 03:40 PM
I have a dynamic employment application on an asp.net page that is built at runtime depending on some values that are derived through the app.config file. There are 3 different sections that are built dynamically. The 3 sections are previous employers, educational background, and references. Each of these 3 sections can be repeated multiple times according to the value derived from the app.config file. These sections have 17, 5, 5 different inputs respectively.

While the user is not required to fill in data into all of the subsections within each section, if they fill out data into the first field of each sub section then they have to completely fill out that entire subsection. For example say a client wants input for 4 previous employers on their application. While the user will not be required to enter data into all 4 of the sections if they fill out the first field (name of the previous employer) then they should also fill in the rest of the data regarding that previous employer.

Since I don't know how many subsections each of the sections may have (if they have any at all), I am stumped as how I should go about validating the users input. Does anyone know how I can validate that if the user fills this field in that I can then make sure all of the other fields of that subsection are filled in?

TIA

david_kw
01-31-2007, 05:22 PM
What is building the form dynamically? Is that server side code or javascript?

david_kw

Mhtml
01-31-2007, 05:29 PM
Well, (assuming server side [, figured wouldn't have mentioned ASP.NET otherwise]) if you're dynamically creating the form... umm, what's wrong with dynamically creating the javascript to validate it?

david_kw
01-31-2007, 05:41 PM
In either case, it sounds like you were wondering what the validation might look like. This example is based on my understanding of your question.



<html>
<head>
<title>Employment App</title>
<script type="text/javascript">
function validateForm(frm) {
if (frm.cname.value != "") { // if company name has a value
if (frm.cname.value.length < 2) {
alert("Company name must be at least 2 characters long.");
return(false);
} else if (frm.ctitle.value.length < 2) {
alert("Title must be at least 2 characters long.");
return(false);
} else if (isNaN(parseInt(frm.cyears.value))) {
alert("Number of years must be a number.");
return(false);
}
}

return(true);
}
</script>
</head>
<body>
<div>
<form name="f" action="#" onsubmit="return(validateForm(this));">
<fieldset id="prevcompany">
<label for="cname">Last company name</label> <input type="text" name="cname" id="cname" /><br />
<label for="ctitle">Title</label> <input type="text" name="ctitle" id="ctitle" /><br />
<label for="cyears">Years with company</label> <input type="text" name="cyears" id="cyears" /><br />
<input type="submit" />
</fieldset>
</form>
</div>
</body>
</html>


You mentioned it's dynamically created, but from your question it wasn't clear if the dynamic creation was part of what you wanted to know. As Mhtml said you could dynamically create the javascript above as well as the html.

david_kw


david_kw

miranda
01-31-2007, 06:13 PM
yes the form is built dynamically in asp.net using C#.

We are trying not to use the built in .net validation and want to write our own instead.

The javascript should be dynamic in the way it works, it is just that I was hoping to have 1 .js file for validation of the application, and not have to create a new .js file for each client. If there is no way around it I guess we will have to write a program that will create the .js file automatically dependant on the same variables.

miranda
01-31-2007, 06:23 PM
the form tag cannot have the onSubmit attribute in it easy enough to work around just add a onClientClick attribute to the asp:button

But, since the form may have 1 txtEmployerName1
or 5 of them (maybe even as many as 10, it is dynamic upon the customer's needs) or it may have none

5 of them would be txtEmployerName1 txtEmployerName2 txtEmployerName3
txtEmployerName4 txtEmployerName5 etc...

That is why i cannot do as you mentioned if the page was static yes validation is a breeze then

david_kw
01-31-2007, 06:37 PM
Still not sure I understand what you need but here is another example that is more dynamic.



<html>
<head>
<title>Employment App</title>
<script type="text/javascript">
function validateForm(frm) {
var i = 1;
var c = document.getElementById("txtEmployerName" + i);
while (c) {
if (c.value != "") {
if (c.value.length < 2) {
alert("Company name #" + i + " must be at least 2 characters long.");
return(false);
} else if (frm["ctitle" + i].value.length < 2) {
alert("Title #" + i + " must be at least 2 characters long.");
return(false);
} else if (isNaN(parseInt(frm["cyears" + i].value))) {
alert("Number of years #" + i + " must be a number.");
return(false);
}
}
c = document.getElementById("txtEmployerName" + ++i);
}

return(true);
}
</script>
</head>
<body>
<div>
<form name="f" action="#" onsubmit="return(validateForm(this));">
<fieldset id="company1">
<label for="txtEmployerName1">Company name #1</label> <input type="text" name="txtEmployerName1" id="txtEmployerName1" /><br />
<label for="ctitle1">Title</label> <input type="text" name="ctitle1" id="ctitle1" /><br />
<label for="cyears1">Years with company</label> <input type="text" name="cyears1" id="cyears1" /><br />
</fieldset>
<fieldset id="company2">
<label for="txtEmployerName2">Company name #2</label> <input type="text" name="txtEmployerName2" id="txtEmployerName2" /><br />
<label for="ctitle2">Title</label> <input type="text" name="ctitle2" id="ctitle2" /><br />
<label for="cyears2">Years with company</label> <input type="text" name="cyears2" id="cyears2" /><br />
</fieldset>
<input type="submit" />
</form>
</div>
</body>
</html>


david_kw

miranda
01-31-2007, 07:00 PM
Thanks David :thumbsup:

that pointed me in the right direction.

I was looking at it a different way

vwphillips
01-31-2007, 07:02 PM
There are anumber of ways of addressing this problem

this uses the form element array
and allows for different types of verification on an element type


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// A = check associated inputs
// B = check completed
// C = check 1 is checked

function Validate(frm){
var eles=frm.elements;
var eleary=[]
for (var zxc0=0;zxc0<eles.length;zxc0++){
var nu=parseInt(eles[zxc0].name.replace(/\D/g,''));
if (!eleary[nu]){
eleary[nu]=[];
}
eleary[nu].push(eles[zxc0]);
}
var message=[];
for (var zxc1=0;zxc1<eleary.length;zxc1++){
if (eleary[zxc1]){
var nme='';
if (eleary[zxc1][0].value.length>0&&eleary[zxc1][0].name.charAt(eleary[zxc1][0].name.length-1)=='A'){
for (var zxc2=0;zxc2<eleary[zxc1].length;zxc2++){
var obj=eleary[zxc1][zxc2];
if (!nme.match(obj.name)){
nme+=obj.name+',';
if (obj.type=='text'&&obj.name.charAt(obj.name.length-1)=='B'){
if (obj.value.length<1){
message.push('Please Complete '+obj.title||obj.name);
}
}
if (obj.type=='checkbox'&&obj.name.charAt(obj.name.length-1)=='C'){
message.push('Please Check One '+obj.title||obj.name);
var objs=frm[obj.name];
for (var zxca=0;zxca<objs.length;zxca++){
if (objs[zxca].checked){
message.length--;
break;
}
}
}
}
}
}
}
}
if (message.length==0){ return true; }
alert(message.join('\n'));
return false;
}



//-->
</script></head>

<body>
<form name="fred" >

<input name="Master1A" ><br>
<input name="name1B" class="Required" title="Name" ><br>
<input name="company1B" class="Required" title="Company" ><br>
<input name="info1" class="Info" ><br>
<input name="address1B"class="Required" title="Company"><br>
<input name="check1C" title="Employes" type="checkbox" >
<input name="check1C" title="Employes" type="checkbox" >
<input name="check1C" title="Employes" type="checkbox" >
<br>
<br>
<input name="Master2A" ><br>
<input name="name2B" class="Required" title="Name" ><br>
<input name="company2B" class="Required" title="Company" ><br>
<input name="info2" class="Info" ><br>
<input name="address2B"class="Required" title="Company"><br>
<input name="check2C" title="Employes" type="checkbox" >
<input name="check2C" title="Employes" type="checkbox" >
<input name="check2C" title="Employes" type="checkbox" >


<input name="button4" type="button" value="Verify All" onclick="Validate(this.form);" >
</form>

</body>

</html>

Mhtml
02-01-2007, 04:01 AM
I still stand by what I've said. You could write little iterative functions in javascript with little parsers for ids and names that could potentially be computationally expensive, if only inelegant and illogical. Or you could write the validation dynamically as well, embedding it even (or caching it somewhere making it reusable). This would allow for maximum expandability not to mention more complex validation with multi-dependant fields and formatting requirements.

If you want to design this with future upgrades in mind then this is the way to go, not a hack.

Of course regardless, you should be doing this on the server side as well to make sure people don't just skip past it (people will be determined enough, I once had Spookster spoofing my shoutbox when I was young'n).

Just my $0.2, always nice to have another perspective on something.

[edit:] Or even AJAX and leave the validation on the server side altogether.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum