Solved

Check form with JavaScript

Posted on 2012-04-04
8
272 Views
Last Modified: 2012-04-11
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
Comment
Question by:diecasthft
  • 5
  • 3
8 Comments
 
LVL 18

Expert Comment

by:nap0leon
Comment Utility
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
 
LVL 18

Expert Comment

by:nap0leon
Comment Utility
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
 

Author Comment

by:diecasthft
Comment Utility
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
 
LVL 18

Expert Comment

by:nap0leon
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:diecasthft
Comment Utility
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
 
LVL 18

Expert Comment

by:nap0leon
Comment Utility
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
 
LVL 18

Accepted Solution

by:
nap0leon earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:diecasthft
Comment Utility
Yup..this is it. Thanks Alot!! I appreciate the help!!!!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now