• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

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">
0
diecasthft
Asked:
diecasthft
  • 5
  • 3
1 Solution
 
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

0
 
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

0
 
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.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
0
 
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.
0
 
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)?
0
 
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

0
 
diecasthftAuthor Commented:
Yup..this is it. Thanks Alot!! I appreciate the 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.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now