need to validate form textbox and chkbox

[duph]

Hi all,

I need a simple script to give an error popup message when user hits submit without filling in certain textboxes and 1 checkbox. I have a script that successfully pops up an error when any of the required textboxes are empty, but

problem 1: in firefox after the error popup the form proceeds to my 'submission successful' url. It needs to stop the form instead and return focus to the field in question. (ie does this fine.)

problem 2: i can't get an error popup for the required checkbox - the form proceeds as if it were not required.

Here is the function:

function IsFormComplete(FormName)
{
var x       = 0
var FormOk  = true

while ((x < document.forms[FormName].elements.length) && (FormOk))
   {
     if (document.forms[FormName].elements[x].value == '')
     { 
        alert('Please enter your '+document.forms[FormName].elements[x].name +' and try again.')
        document.forms[FormName].elements[x].focus()
        FormOk = false 
     }
     x ++
   }
return FormOk
}

...and my form code:

<FORM name="form1" method="post" action="/cgi-bin/form/trafficrelief/form.cgi"><div id="form1" align="right">
			<input id="name" type="text" name="name" size="25" tabindex="1" /><br />
			<input id="org" type="text" name="org" size="25" tabindex="2" value=" " /><br />
			<input id="email" type="text" name="email" size="25" tabindex="3" /><br />
			<input id="address" type="text" name="address" size="25" tabindex="4" value=" " /><br />
			<input id="zip" type="text" name="zip" size="25" tabindex="5" /><br />
			<input id="phone" type="text" name="phone" size="25" tabindex="6" value=" " /><br />
			<input id="comments" type="text" name="comments" size="25" tabindex="7" value=" " /><br />
			<input id="submit" type="image" src="images/submit.gif" name="submit" tabindex="9" OnClick=IsFormComplete("form1")>
			</div>
	        <input name="endorse" type="checkbox" id="endorse" tabindex="8" value="I_ENDORSE" />
			
			
			
			
			
<INPUT TYPE="HIDDEN" NAME="data_order" 
    VALUE="name,org,email,address,zip,phone,comments,endorse">
<INPUT TYPE="HIDDEN" NAME="submit_to" VALUE="web@transalt.org">
<INPUT TYPE="HIDDEN" NAME="automessage" VALUE="mymessage">
<INPUT TYPE="HIDDEN" NAME="outputfile" VALUE="coalition">
<INPUT TYPE="HIDDEN" NAME="countfile" VALUE="coalition">
<INPUT TYPE="HIDDEN" NAME="emailfile" VALUE="coalition">
<INPUT TYPE="HIDDEN" NAME="form_id" VALUE="Citywide Coalition for Traffic Relief">
<INPUT TYPE="HIDDEN" NAME="ok_url" 
     VALUE="[URL unfurl="true"]http://...">[/URL]
<INPUT TYPE="HIDDEN" NAME="not_ok_url" 
     VALUE="[URL unfurl="true"]http://...">[/URL]
</form>

Can anyone lend a hand? I'm not writing my own js yet so I'm a bit clueless.

Thanks!

 

[BabyJeffy]

To prevent your form from submitting when your validation function returns false...

Remove this from the submit button:

OnClick=IsFormComplete("form1")

Add this to the <form> tag:

onsubmit="return (IsFormComplete('form1'))"

Regarding the checkbox, you are testing to see if it's value is empty -- but it's value is never empty (it's checked state is all that varies)... so you cannot use the same method to check for a checkbox as you do for a string being entered in a text input.

To access the checkbox "checked" state, you can use this kind of approach:

document.forms['form1'].elements['endorse'].checked

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[duph]

This is great - the first part now works fine.

can you tell me how exactly I should alter this script with your suggestion for the checkbox? I played around with a couple of things but in the end really don't know what needs to change and what needs to stay..

 

[cLFlaVA]

1) give your checkboxes the same name
2) create a function to make sure one is checked

function isOneChecked( cbObj ) {
    // loop through each checkbox
    for ( var i = 0; i < cbObj.length; i++ ) {
        // if the current box is checked, we're good
        if (cbObj[i].checked) return true;
    }
    alert("please check a checkbox!");
    return false;
}

3) include the call to this function

onsubmit="return (IsFormComplete('form1')) && isOneChecked(this.cbName);"

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[duph]

almost paradise, except now it is returning false even when the cb is checked. ?

 

[duph]

And wait - the checkbox script isn't working in IE

 

[cLFlaVA]

it looks to me like your first function will always return false. what are you trying to do with it? are the fields you are trying to check all text boxes? You might want to try something like this:

function IsFormComplete( f ) {
    // get all fields in the form
    var e = f.elements;

    // loop through each field
    for ( var i = 0; i < e.length; i++ ) {

        // if the element is a text element and the value is blank
        if ( e[i].type.indexOf('text') > -1 && e[i].value == '' ) {
            alert('please enter your ' + e[i].name + '!');
            return false;
        }

    }
    return true;
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

what are you trying to verify with the checkbox? just if it has been checked? if that's the case, all you need to do is test the checked property.

onsubmit="return ( IsFormComplete(this) && this.endorse.checked );

oh, and for MY changes to the IsFormComplete function, you'll now need to call it as I have in this latest post, passing it "this" instead of the form's name.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

if i have knocked you into the land of confusion, let me know. i'll back up a bit.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[duph]

no I'm with you...

so far no problems with IsFormComplete always returning false.

yes all I want is to make sure the cb is checked, so this.endorse.checked <i>works</i> in that the forms stops progress, but i really need an error message so I liked your isOneChecked fx better, if i could only get it to return true.

 

[cLFlaVA]

ok, so we can modify the function:

function isOneChecked( cbObj ) {
    if (cbObj.checked) return true;
    alert("please check a checkbox!");
    return false;
}

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

i apologize for the confusion earlier - i thought you had multiple checkboxes - not just one.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[duph]

AWESOME! Thanks so much for all your help cLFlaVA and also BabyJeffy.

 

[cLFlaVA]

no prob!

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]