Dynamic Alert Box

[mastershake]

I have coded a simple web form validation script which goes through all the mandatory fields when a users hits the submit button, and produces an alert box telling the user what field is not filled in. However it produces an alert box for each field, individually, which is slightly annoying. Do you know of a script which will produce a dynamic alert box, one tells you to fill in all mandatory fields that are empty, not just one at a time? Thank you in advance.

My code is below

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {
	alert(alerttxt);
	return false;
 }
else {return true}
}
}function validate_form(thisform)
{
with (thisform)
{
	var name = "Patient ID box must be filled out to continue!"
	if (validate_required(patientid, name)==false)
	  {patientid.focus();return false}

	else if (validate_required(dob, "Date of Birth box must be filled out to continue!")==false)
	  {dob.focus();return false}
	  
	else if (validate_required(age, "Age box must be filled out to continue!")==false)
	  {age.focus();return false}

	else if (validate_required(height, "Height box must be filled out to continue!")==false)
	  {height.focus();return false}
	 
	else if (validate_required(weight, "Weight box must be filled out to continue!")==false)
	  {weight.focus();return false}

	else if (validate_required(sex, "Check a Sex button to contunue!")==false)
	  {!sex.checked();return false}

	else if (validate_required(permission, "Choose Permission Yes or No to contunue!")==false)
	  {!permission.checked();return false}

}

	return true;

}
</script>

[jscheuer1]

I'm not sure how to handle your sex and permission check boxes/radio buttons, whatever they are. I coded for check boxes that set the value of hidden fields. But I cannot see your markup, so I cannot be sure of exactly how to handle them. Other than that, something like so:

<script type="text/javascript">
function validate_required(field){
if (field.value==null||field.value=="")
	return false;
return true;
}
function validate_form(thisform){
var alerttxt='', f=thisform, fc=null;

	if (!validate_required(f.patientid)){
	alerttxt += "Patient ID box must be filled out to continue!\n";
	  fc=f.patientid;
	  }

	if (!validate_required(f.dob)){
	alerttxt += "Date of Birth box must be filled out to continue!\n";
	  fc=fc||f.dob;
	  }
	  
	if (!validate_required(f.age)){
	alerttxt += "Age box must be filled out to continue!\n";
	  fc=fc||f.age;
	  }

	if (!validate_required(f.height)){
	alerttxt += "Height box must be filled out to continue!\n";
	  fc=fc||f.height;
	  }
	 
	if (!validate_required(f.weight)){
	alerttxt += "Weight box must be filled out to continue!\n";
	  fc=fc||f.weight;
	  }

	if (!validate_required(f.sex)){
	alerttxt += "Check a Sex button to contunue!\n";
	  fc=fc||f.male; //male should be the name of one of the checkboxes
	  }

	if (!validate_required(f.permission)){
	alerttxt += "Choose Permission Yes or No to contunue!\n";
	  fc=fc||f.yes; //yes should be the name of one of the checkboxes
	  }

	if (alerttxt){
		alert(alerttxt);
		fc.focus();
		return false;
	}
	return true;

}
</script>

[alexjewell]

I use this:

function checkForm(formobj){

		var fieldRequired = Array("name", "msg"); // actual names of fields

		var fieldDescription = Array("Name", "Message"); // what you want to call it in the alert

		var alertMsg = "The following form fields were left empty:\n\n";
		
		var l_Msg = alertMsg.length;
		
		for (var i = 0; i < fieldRequired.length; i++){
			var obj = formobj.elements[fieldRequired[i]];
			if (obj){
				switch(obj.type){
				case "select-one":
					if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
						alertMsg += " - " + fieldDescription[i] + "\n";
					}
					break;
				case "select-multiple":
					if (obj.selectedIndex == -1){
						alertMsg += " - " + fieldDescription[i] + "\n";
					}
					break;
				case "text":
				case "textarea":
					if (obj.value == "" || obj.value == null){
						alertMsg += " - " + fieldDescription[i] + "\n";
					}
					break;
				default:
				}
				if (obj.type == undefined){
					var blnchecked = false;
					for (var j = 0; j < obj.length; j++){
						if (obj[j].checked){
							blnchecked = true;
						}
					}
					if (!blnchecked){
						alertMsg += " - " + fieldDescription[i] + "\n";
					}
				}
			}
		}

		if (alertMsg.length == l_Msg){
			return true;
		}else{
			alert(alertMsg);
			return false;
		}
	}

And you would use it like so:

<form method="post" action="whatever.php" onsubmit="return checkForm(this);">
...

I'm not entirely sure if it works on textboxes, either, though. Guess you'll have to see. Haha.

[mastershake]

Thanks so much for both of your responses but I actually fooled around with the code a bit and found a simpler option. (see code below) I am so happy that I have realized the enjoyment I recieve while coding, im currently writing some stuff in asp.net based on thos basic html pages before. The community is very helpful and the people so nice, got it is good to be a geek. : )

-Andrew

<script type="text/javascript">
function validate_required(field,alerttxt)
{
	with (field)
	{
	if (value==null||value=="")

	 {
		//alert(alerttxt);
		return false;
	 }
	else {return true}

	}
}

function radio_button_checker()
{
	// set var radio_choice to false
	var radio_choice = false;

	// Loop from zero to the one minus the number of radio button selections
	for (counter = 0; counter <all_form.sex.length; counter++)
	{
	// If a radio button has been selected it will return true
	// (If not it will return false)
	if (all_form.sex[counter].checked)
	radio_choice = true; 
	}

	if (!radio_choice)
	{
	// If there were no selections made display an alert box 
	//alert("Please select a sex.")
	return (false);
	}
	return (true);
}


function validate_form(thisform)
{
	with (thisform)
	{
		//var name = "Patient ID box must be filled out to continue!"

				var errMsg = "";

		if (validate_required(patientid, name)==false)
		  {patientid.focus(); errMsg = "Patient ID is required"; //return false
		  }

		if (validate_required(dob, "Date of Birth box must be filled out to continue!")==false)
		  {dob.focus(); errMsg = errMsg + "\nDOB is required"; //return false
		  }
		  
		if (validate_required(age, "Age box must be filled out to continue!")==false)
		  {age.focus(); errMsg = errMsg + "\nAge required"; //return false
		  }

		if (validate_required(height, "\nHeight box must be filled out to continue!")==false)
		  {height.focus(); errMsg = errMsg + "\nHeight required"; //return false
		 }
		 
		if (validate_required(weight, "Weight box must be filled out to continue!")==false)
		  {weight.focus(); errMsg = errMsg + "\nWeight required"; //return false
		 }

		if (radio_button_checker(sex, "")==false)
		  {sex.checked;  errMsg = errMsg + "\nPlease select a sex"; //return false
		  }

	}

			//var name = "arathi"
			//VAR NAME2= "RAVI;
			//NAME = NAME + "RAVI"
	
	if (errMsg != "" )
	{
		alert(errMsg);
		return false;
	}

	 return true;

}
</script>