Check form with JavaScript

Good Morning All!! I have a dilhema that I hope someone could assit me with. I have a piece of javascript that checks my form to make sure two form fields have something entered in them...no problems there. However, on that same page I have several check boxes, and I need to incoporate another form check to make sure at least one check box is checked. I can get the text based form validation to work, and I can get the check box validation to work indepentently of each other, but I need them to work together somehow. In both cases, if the tect field is empty, or at least one check box is not checked and a submit is done, I want an alert box to pop up and the return the user back to the screen to enter, or select what's needed. Both pieces of my java is below, along with my form statement. Thanks for all of your help!!!!

------Check Box validation -----
function checkForm(FormName)
{
      if(FormName.delcheckbox1.checked||FormName.delcheckbox1.checked)
      {
      return true;
}
else{
alert('You must check a box for each Spend Plan item to be funded');
return false;
}

----- text field validation
function ExtendJS(FormName)
{
if (!TextAreaRequired(FormName, 'ISTotalfield')) {
alert("You must enter the cost of the selected items to request a MIPR !!!");
return false;
}
if (!TextAreaRequired(FormName, 'commentfield')) {
alert("You must enter the Funding Description (Purpose) !!!");
return false;
}
}

------ form statement
<cfform id="Form_RequestAccess" name="Form_RequestAccess" onSubmit = "return checkForm(Form_RequestAccess);return ExtendJS(Form_RequestAccess);" method="post"
action="InsertFinancial1atest.cfm">
diecasthftAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
Make your form submit function run a "ValidateForm()" function that places calls to the other functions.
Change the other functions to return error messages to the main function.

Something like this:
function validateTotal(FormName){
	if (!TextAreaRequired(FormName, 'ISTotalfield')) {
	return "You must enter the cost of the selected items to request a MIPR !!! /n"
	}
}

function validateComment(FormName){
	if (!TextAreaRequired(FormName, 'commentfield')) {
	return "You must enter the Funding Description (Purpose) !!! /n"
	}
}

function checkForm(Formname){
      if(FormName.delcheckbox1.checked||FormName.delcheckbox1.checked){
	      return true;
	} else {
		return "You must check a box for each Spend Plan item to be funded. /n"
	}
}

function ValidateForm(FormName){
	var errMsgs = '';
	errMsgs += validateTotal(FormName)
	errMsgs += validateComment(FormName)
	errMsgs += checkForm(FormName)

	if (errMsgs = ''){
		//No errors
		return true
	} else {
		alert(errMsgs)
		return false
	}
}

Open in new window

nap0leonCommented:
Not sure that the above captures this requirement though:
"if the tect field is empty, or at least one check box is not checked and a submit is done, I want an alert box to pop up and the return the user back to the screen to enter, or select what's needed"

Instead of returning the error messages as shown above, have them return only true of false and set variables for each in your validateForm function so that you can display the appropriate error to the user.

I'm sure the logic area in here is not exactly what you are asking (you posted validation for two text fields, but only mention one in the requirement, so I'm guessing), but hopefully the structure is enough to point you in the right direction.
function validateTotal(FormName){
	(!TextAreaRequired(FormName, 'ISTotalfield'))? return false : return true
}

function validateComment(FormName){
	(!TextAreaRequired(FormName, 'commentfield'))? return false : return true
}

function checkForm(Formname){
      (FormName.delcheckbox1.checked||FormName.delcheckbox1.checked) ? return true : return false
}

function ValidateForm(FormName){
	var isTotalNotEmpty = validateTotal(FormName) 
	var isCommentNotEmpty = validateComment(FormName) 
	var isACheckboxChecked = checkForm(FormName) 

	//your True/False condtionins go here:
	if (!(isACheckboxChecked)){
		//No checkboxes checked- immediate failure
		return false
	}

	//At least one checkbox is checked, so let's test the text field
	if (isCommentNotEmpty){
		//the textbox is not empty, so form is allowed to submit
		return true
	}

	//at least one checkbox is checked, and the textbox is not empty, so the form is allowed to submit
	return true
}

Open in new window

diecasthftAuthor Commented:
Thanks for the info!!! I see what's trying to happen here...but I'm not overly familiar with Java, so please bear with me for a minute. Would my launch statement now refer to the ValidateForm function, as:

<cfform id="Form_RequestAccess" name="Form_RequestAccess" onSubmit = "return ValidateForm('Form_RequestAccess')" method="post"
action="InsertFinancial1aatest.cfm">

It doesn't seem to be work. It automicatlly tries to submit the action page, wether I have something filled in and checked or not.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

nap0leonCommented:
The ValidateForm I posted was untested.. I think I know what it is doing wrong, but don't have time to validate it at the moment.. I can point you a direction that will help you customize the behavior to what you are looking for.  If I have a chacne after my meetings, I'll build up a test HTML page for it.

First, let's double check to make sure each of the "is" functions are returning the correct values (I added an alert) and I nested the true false statements.

function ValidateForm(FormName){
	var isTotalNotEmpty = validateTotal(FormName) 
	var isCommentNotEmpty = validateComment(FormName) 
	var isACheckboxChecked = checkForm(FormName) 

	alert('isTotalNotEmpty=' + isTotalNotEmpty + '\nisCommentNotEmpty=' + isCommentNotEmpty + '\nisACheckboxChecked=' + isACheckboxChecked);

	//your True/False conditions go here:
	if (!(isACheckboxChecked)){
		//No checkboxes checked- immediate failure
		return false
	} else {
		//At least one checkbox is checked, so let's test the text field
		if (isCommentNotEmpty){
			//the textbox is not empty, so form is allowed to submit
			return true
		} else {
			return false
		}
	}

}

Open in new window


If the "is" functions are returning correctly, but the validation is still not behaving right, can you write up which conditions are required to allow validation for me again using the function results?

e.g.,
Valid conditions:
"if a checkbox is checked, either or both Total and Comment must be not empty"
"if no checkboxes are checked, both Total and Comment must be non-empty"

or... the same thing but using the function names:
1. isACheckboxChecked = true, isTotalNotEmpty = true, isCommentNotEmpty = true
2. isACheckboxChecked = true, isTotalNotEmpty = false, isCommentNotEmpty = true
3. isACheckboxChecked = true, isTotalNotEmpty = true, isCommentNotEmpty = false
4. isACheckboxChecked = false, isTotalNotEmpty = true, isCommentNotEmpty = true
diecasthftAuthor Commented:
That still didn't work..but again, it's my ingorance with java I'm sure. Basically, what I want is something that at least one checkbox has to be check, and the two text form fields must have something in them, if any of those conditions are not met, pop up an alert box, and then send the user back to the form to do what's missing. If they checked a box, but didn't fill in the text fields, it's false, if they filled in a tect box, but didn't check a select box, it's false. All three conditions must be met for the form to submit.
nap0leonCommented:
Might be easier to just write this from scratch...

What does the HTML look like for the two text boxes and the checkboxes (the HTML, not the ColdFusion code)?
nap0leonCommented:
Here is a sample page.
You'll need to change the names and IDs of the fields to match those in your form

<html>
<script>
function ValidateForm(){
	var cbx1Value = (document.getElementById('checkbox1').checked) ? document.getElementById('checkbox1').value : ''
	var cbx2Value = (document.getElementById('checkbox2').checked) ? document.getElementById('checkbox2').value : ''
	var txt1Value = document.getElementById('textbox1').value
	var txt2Value = document.getElementById('textbox2').value

	if ((!(cbx1Value=='') || (!(cbx2Value==''))) && (!(txt1Value=='')) && (!(txt2Value==''))){
		return true
	} else {
		return false
	}
}
</script>
<body>

<form id="Form_RequestAccess" name="Form_RequestAccess" method="get" action="" onsubmit="return ValidateForm()">
TextBox1 <input type="text" name="textbox1" id="textbox1" value=""><br/>
TextBox2 <input type="text" name="textbox2" id="textbox2" value=""><br/>

CheckBox1 <input type="checkbox" name="thecheckbox" id="checkbox1" value="1"><br/>
CheckBox2 <input type="checkbox" name="thecheckbox" id="checkbox2" value="2"><br/>

<button type="Submit">Submit</button>
</form>
</body>
</html> 

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
diecasthftAuthor Commented:
Yup..this is it. Thanks Alot!! I appreciate the help!!!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.