Javascript to overlook certain required fields based on value selected

I have created this quick page [attached] that closely mimics the one I am working on for my client.  The basics: open page, no sections appear, choose a project type and the corresonding section appears.

Here is my plight:

Some clients want required fields in the various sections, so for this example, lets say the Name field is reuqired in all sections.  I can't have this because, if you select
States for example, then the fruits and cars section is not showing, you will never be able to submit the form because the required rule would prevent this.

This is what I want >> if States is the project type selected and the states fieldset is visible only enforce the "required" rule for the Name field that appears within the States feieldset.  Once that field is populated, allow the form to submit.  Same of course should apply to Cars when selected and Fruites when selected

How do I code that in my javascript?

Thank you in advance.

Note, not sure this matter - but I am using codeignter framework.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Fruits</title>

<script type="text/javascript">
function callOnLoad()
{ 
 var projectType_Field_Id = 'theType';
 
var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 
       
var project_type = document.getElementById(projectType_Field_Id);
	refreshSections(project_type);
	
}

function refreshSections(selectedType) 
{	
	var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 

	for (var i = 0; i < projectTypes.length; i++) 
	{
		if (projectTypes[i].value == selectedType) 
		{
			document.getElementById(projectTypes[i].id).style.display = '';
		} else {
			document.getElementById(projectTypes[i].id).style.display = 'none';
		}
	}
		
}
function projectTypeChange()
{ 
	
	 var projectType_Field_Id = 'theType';
	 
	var projectTypes = new Array (
	{id : 'fs1', value:'Fruits'},
	{id : 'fs2', value:'Cars'},
	{id : 'fs3', value:'States'}); 
	
	var project_type = document.getElementById(projectType_Field_Id).value;
	refreshSections(project_type);
}


</script>
</head>

<body onload="callOnLoad()">
<form method="post" action="">
<table>
<tr><td>
<fieldset name="fs_geninfo1" id="fs_genInfo1">
				<legend>General Project Information</legend>
				
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Date</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label1">Time</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>

					<tr>
						<td><label id="Label2">Approvers</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
					<tr>
<td>Project Type:</td><td><select name="Select1" id="theType" onchange="projectTypeChange()">
				<option value="0" selected="selected">Select</option>
				<option value="Fruits">Fruits</option>
				<option value="Cars">Cars</option>
				<option value="States">States</option>
			</select>
</td></tr>
		</table>
				
			</fieldset>
			</td>
			</tr>

<tr><td>
<fieldset name="fs1" id="fs1">
				<legend style="color:fuchsia">Fruits</legend>
				
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>
				
			</fieldset>
			</td>
			</tr>
			<tr>
			<td>
			<fieldset name="fs2" id="fs2">
				<legend  style="color:fuchsia">Cars</legend>
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>

			</fieldset>
			</td></tr>
			<tr><td>
			<fieldset name="fs3" id="fs3">
				<legend  style="color:fuchsia">States</legend>
				<table style="width: 50%">
					<tr>
						<td><label id="Label1">Name</label></td>
						<td><input name="Text1" type="text" /></td>
					</tr>
					<tr>
						<td><label id="Label2">Description</label></td>
						<td><textarea cols="20" name="TextArea1" rows="2"></textarea></td>
					</tr>
				</table>

			</fieldset>
			</td></tr>
			<tr><td>


<input name="Button1" type="button" value="Submit" />
</td></tr>
</table>
</form>
</body>

</html>

Open in new window

LVL 1
justmelatAsked:
Who is Participating?
 
BadotzConnect With a Mentor Commented:
//
var PROJECTS = [
    { "name":"States", "required":["name"] },
    { "name":"Fruits", "required":["txtB","txtC"] },
    { "name":"Cars", "required":["name","txtA","txtC"] )
];

//
// Iterate over the objects in array PROJECTS 
// and validate only those elements listed in 
// the "required" array.
//

function validate(ra) {
    for (var i = 0; i < ra.length; i += 1) {
        if (document.getElementById(ra[i]).value == "") { return false; }
    }
    return true; // All fields contain something
}


function validator(prj) {
    for (var i = 0; i < PROJECTS.length; i += 1) {
        if (PROJECTS[i].name == prj) {
            return validate(PROJECTS[i].required); // Validate the fields in the array
        }
    }
    return false; // Something failed
}
//

Open in new window

0
 
BadotzCommented:
Create a JSON object for the clients and indicate which fields are available.
//
var C = [
    { "name":"Fred", "valid":["txtA","txtB","txtC"] },
    { "name":"Dave", "valid":["txtB","txtC"] }
];

Open in new window

Or do this server-side and pull the info from a DB.
0
 
justmelatAuthor Commented:
Sorry, I don't follow this!
0
 
justmelatAuthor Commented:
Now I follow - thank you.
0
 
BadotzCommented:
No worries - glad to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.