...

View Full Version : Resolved Guidance on required field if check box



SyncSpin
12-15-2011, 12:35 AM
Hello all.

I need to use javascript to validate 6 text inputs to make sure data is entered and they are not empty. However, there is a checkbox above this and if the checkbox is checked I need these areas to NOT validate as they become optional at that point.

Here is what I have:



function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
if(document.forms["form1"].input1.value.length < 1) { // x
return false;
}
else {
return true;
}
}
}


The above is if the box is checked to validate the field. I want it to do the opposite. How would you do the above with the If statement referring if the check box is NOT checked? And how could I add more fields to check then just one?

I am new to javascript so any help or guidance is appreciated.

Old Pedant
12-15-2011, 01:25 AM
var textFields = ["name","address","city","zip","email","phone"]; // or whatever your text field names are

function validateForm( )
{
var form = document.form1;
if ( ! form1.sales.checked )
{
for ( var t = 0; t < textFields.length; ++t )
{
var field = form[textFields[t]];
var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
if ( value.length < 3 ) /* 3 is arbitrary...choose what you prefer */
{
oops += "\n" + field.name + " does not seem to be filled in";
}
}
if ( oops != "" )
{
alert("Please correct these errors:" + oops);
return false;
}
}
... other validation not dependent on that checkbox ...

}

SyncSpin
12-15-2011, 02:37 AM
Amazing help. Thank you for posting. Gonna play around to see if I can understand it!

SyncSpin
12-15-2011, 03:10 AM
Ok looks like I need a bit more help as its currently not working with no error.

Here is my full code.






<script type="text/javascript">

var textFields = ["node","pres","knocks","sales","contact","ws"]; // or whatever your text field names are

function validateForm( )
{
var form = document.wowsales;
if ( ! wowsales.off.checked )
{
for ( var t = 0; t < textFields.length; ++t )
{
var field = form[textFields[t]];
var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
if ( value.length < 1 ) /* 3 is arbitrary...choose what you prefer */
{
oops += "\n" + field.name + " does not seem to be filled in";
}
}
if ( oops != "" )
{
alert("Please correct these errors:" + oops);
return false;
}
}


}

</script>









<form action="process.php" name="wowsales" method="post" onsubmit="return validateForm()">


<b>OFF? </b><input type="checkbox" name="off" value="yes" />

Required Fields: * if not OFF

<input type="text" size="10" name="node">
<input type="text" size="10" name="press">
<input type="text" size="10" name="knocks">
<input type="text" size="10" name="sales">
<input type="text" size="10" name="contact">
<input type="text" size="10" name="ws">

Optional Fields:
<input type="text" size="10" name="doort">
<input type="text" size="10" name="webl">
<input type="text" size="10" name="total">
<input type="text" size="10" name="appt">
<input type="text" size="10" name="phone">
<input type="text" size="10" name="waf">



<input type="submit" value="Submit Info">

</form>




</div>

</body>
</html>


Right now it submits every time no matter.

Old Pedant
12-15-2011, 04:07 AM
One goof mine, one goof yours.


var textFields = ["node","press","knocks","sales","contact","ws"];

function validateForm( )
{
var oops = ""; // must initialize this!
var form = document.wowsales;
if ( ! wowsales.off.checked )
...

You spelled "press" wrong. I omitted the initialization of the oops variable.

SyncSpin
12-15-2011, 04:12 AM
Thanks again for the help. Unfortunately, nothing happens when I submit the form. I submit with everything empty with and without the box checked and it works every time with no error.

I added the on submit to the form, what am I missing?

Old Pedant
12-15-2011, 04:20 AM
With those two changes, it works perfectly for me.

Now, none of the *OTHER* fields are being validated, but you didn't ask for that.

SyncSpin
12-15-2011, 04:26 AM
I am going crazy. On my version it just works. What could I possibly be missing?

Here is a test link:

http://www.syncspin.com/wowsales/teststuff.php

Am I missing something small?

SyncSpin
12-15-2011, 04:30 AM
Oh! In Safari it works but Firefox it does not. Probably something I have off or something.

SyncSpin
12-15-2011, 04:41 AM
DO I need to add .document in front of anything for firefox?

SyncSpin
12-15-2011, 04:49 AM
Figured it out. Had to add document. to the wowsales.off.checked


Thanks!

Old Pedant
12-15-2011, 06:15 AM
No, actually the only place you should have used document.wowsales is in the very first line:

var form = document.wowsales;

From there on out, you just use form in place of document.wowsales. What's the point in having variable for handy use if you don't use them?

SyncSpin
12-15-2011, 02:20 PM
See, I am still learning. lol Thanks for that tip. I didn't realize that the variable could be used in that way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum