close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

 
› WebAssist Forums › Data Bridge › CSS Form Builder › array checkbox breaks form validation
Sign in to rate this thread
rating

array checkbox breaks form validation

Thread began 6/23/2010 10:19 am by ijs174940 | Last modified 6/24/2010 10:48 am by Jason Byrnes | 2873 views | 12 replies |

6/23/2010 10:19 am  |  #1 ijs174940Beta Tester

array checkbox breaks form validation

Currently using CCS Form Builder 1.0.2 in CS4 and I have run into a problem validating my form, so i made a clean page and rechecked but got the same result. If I add a few fields and checkboxs named them and set the values the validation works fine but if I change the names of the checkboxs to arrays as in add "[]" to the end of the name the validation stops??

example

<form action="" method="post" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.testtext,'text box required',document.form1.testtext,0,false,'text');WAValidateRQ(document.form1.checkbox[],'check box requiired',document.form1.checkbox[],0,true,'checkbox');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,document.getElementById('false'),false);return document.MM_returnValue">
<p>
<label>
<input type="text" name="testtext" id="testtext" />
</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="1"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="2"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="3" />
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="4"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]"value="5" />
</label>
<label> </label>
<label><br />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>

Is this a limitation of the extension or a bug?

Thanks for any input guys...

Sign in to reply to this post

6/23/2010 10:23 am  |  #2 Jason ByrnesWebAssist

add the validation to the checkboxes before changing the name to create an array.

the validation code will use the name of the form element, but in the case of a checkbox array group, the name must contain the "[]" but the referance must not.


in other words, the validation code:

<form action="" method="post" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.testtext,'te xt box required',document.form1.testtext,0,false,'text'); WAValidateRQ(document.form1.checkbox[],'check box requiired',document.form1.checkbox[],0,true,'checkbox');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,document.getElementById('false'),fa lse);return document.MM_returnValue">




is referencing the checkbox elements as:
document.form1.checkbox[]


when the proper reference is:
document.form1.checkbox

the proper code will be created if you add the [] to the checkbox name after adding validation.

Sign in to reply to this post

6/23/2010 10:31 am  |  #3 ijs174940Beta Tester

Hi Jason

tried this but same result no validation, am I missing something?

<form action="" method="post" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.testtext,'test is required',document.form1.testtext,0,false,'text');WAValidateRQ(document.form1.checkbox,'check box is required',document.form1.checkbox,0,true,'checkbox');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,document.getElementById('false'),false);return document.MM_returnValue">
<p>
<label>
<input type="text" name="testtext" id="testtext" />

</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox[]" value="1"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" value="2"/>

</label>
<label> <br />
<input type="checkbox" name="checkbox[]" value="3" />
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" value="4"/>
</label>
<label> <br />

<input type="checkbox" name="checkbox[]" value="5" />
</label>
<label> </label>
<label><br />
</label>
</p>
<p>
<label>

<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>

Sign in to reply to this post

6/23/2010 10:53 am  |  #4 Jason ByrnesWebAssist

post a link please

Sign in to reply to this post

6/23/2010 10:58 am  |  #5 ijs174940Beta Tester

The site is my office local server no live link

Sign in to reply to this post

6/23/2010 11:08 am  |  #6 Jason ByrnesWebAssist

can you post a copy of the page then please.

Sign in to reply to this post

6/23/2010 11:10 am  |  #7 ijs174940Beta Tester

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Little White Van Company - Online Print Toolkits</title>
<script type="text/javascript">
<!--
function WAtrimIt(theString,leaveLeft,leaveRight) {
if (!leaveLeft) {
while (theString.charAt(0) == " ")
theString = theString.substring(1);
}
if (!leaveRight) {
while (theString.charAt(theString.length-1) == " ")
theString = theString.substring(0,theString.length-1);
}
return theString;
}

function WAFV_GetValueFromInputType(formElement,inputType,trimWhite) {
var value="";
if (inputType == "select") {
if (formElement.selectedIndex != -1 && formElement.options[formElement.selectedIndex].value && formElement.options[formElement.selectedIndex].value != "") {
value = formElement.options[formElement.selectedIndex].value;
}
}
else if (inputType == "checkbox") {
if (formElement.length) {
for (var x=0; x<formElement.length ; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (formElement.checked)
value = formElement.value;
}
else if (inputType == "radio") {
if (formElement.length) {
for (var x=0; x<formElement.length; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (formElement.checked)
value = formElement.value;
}
else if (inputType == "radiogroup") {
for (var x=0; x<formElement.length; x++) {
if (formElement[x].checked && formElement[x].value!="") {
value = formElement[x].value;
break;
}
}
}
else if (inputType == "iRite") {
var theEditor = FCKeditorAPI.GetInstance(formElement.name) ;
value = theEditor.GetXHTML(true);
}
else {
var value = formElement.value;
value=value.replace(/<p>(\&\#160\;)*<\/p>/,"");
}
if (trimWhite) {
value = WAtrimIt(value);
}
return value;
}

function WAAddError(formElement,errorMsg,focusIt,stopIt) {
if (document.WAFV_Error) {
document.WAFV_Error += "\n" + errorMsg;
}
else {
document.WAFV_Error = errorMsg;
}
if (!document.WAFV_InvalidArray) {
document.WAFV_InvalidArray = new Array();
}
document.WAFV_InvalidArray[document.WAFV_InvalidArray.length] = formElement;
if (focusIt && !document.WAFV_Focus) {
document.WAFV_Focus = focusIt;
}

if (stopIt == 1) {
document.WAFV_Stop = true;
}
else if (stopIt == 2) {
formElement.WAFV_Continue = true;
}
else if (stopIt == 3) {
formElement.WAFV_Stop = true;
formElement.WAFV_Continue = false;
}
}

function WAValidateRQ(formElement,errorMsg,focusIt,stopIt,trimWhite,inputType) {
var isValid = true;
if (formElement.length && inputType.toLowerCase()!="radio" && inputType.toLowerCase()!="select") formElement=formElement[0];
if (!document.WAFV_Stop && !formElement.WAFV_Stop) {
var value=WAFV_GetValueFromInputType(formElement,inputType,trimWhite);
if (value == "") {
isValid = false;
}
}
if (!isValid) {
WAAddError(formElement,errorMsg,focusIt,stopIt);
}
}
function WAAlertErrors(errorHead,errorFoot,setFocus,submitForm,allowOverride) {
if (!document.WAFV_StopAlert) {
document.WAFV_StopAlert = true;
if (document.WAFV_InvalidArray) {
document.WAFV_Stop = true;
var errorMsg = document.WAFV_Error;
if (errorHead!="")
errorMsg = errorHead + "\n" + errorMsg;
if (errorFoot!="")
errorMsg += "\n" + errorFoot;
document.MM_returnValue = false;
if (document.WAFV_Error!="") {
if (allowOverride) {
if (confirm(errorMsg.replace(/&quot;/g,'"'))) {
document.MM_returnValue = true;
return;
}
}
else {
alert(errorMsg.replace(/&quot;/g,'"'));
}
}
else if (submitForm)
submitForm.submit();
if (setFocus && document.WAFV_Focus) {
if (document.getElementById(document.WAFV_Focus.name+"___Config") && document.WAFV_Focus.type.toLowerCase() == "hidden") {
var theEditor = FCKeditorAPI.GetInstance(document.WAFV_Focus.name);
theEditor.EditorWindow.focus();
setTimeout("setTimeout('document.WAFV_Stop = false;document.WAFV_StopAlert = false;',1)",1);
}
else {
document.tempFocus = document.WAFV_Focus;
setTimeout("document.tempFocus.focus();setTimeout('document.WAFV_Stop = false;document.WAFV_StopAlert = false;',1)",1);
}
}
else {
document.WAFV_Stop = false;
document.WAFV_StopAlert = false;
}
for (var x=0; x<document.WAFV_InvalidArray.length; x++) {
document.WAFV_InvalidArray[x].WAFV_Stop = false;
}
}
else {
document.WAFV_Stop = false;
document.WAFV_StopAlert = false;
if (submitForm) {
submitForm.submit();
}
document.MM_returnValue = true;
}
document.WAFV_Focus = false;
document.WAFV_Error = false;
document.WAFV_InvalidArray = false;
}
}
//-->
</script>
</head>

<body>
<form action="" method="post" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.testtext,'text is required',document.form1.testtext,0,false,'text');WAValidateRQ(document.form1.checkbox,'check box is required',document.form1.checkbox,0,true,'checkbox');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,document.getElementById('false'),false);return document.MM_returnValue"> <p>
<label>
<input type="text" name="testtext" id="testtext" />
</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="1"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="2"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="3" />
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="4"/>
</label>
<label> <br />
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="5" />
</label>
<label> </label>
<label><br />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>


</body>
</html>

Sign in to reply to this post

6/23/2010 11:22 am  |  #8 Jason ByrnesWebAssist

only the name should contain the square brackets, not the id. For example, instead of:
<input type="checkbox" name="checkbox[]" id="checkbox[]" value="1"/>

use:
<input type="checkbox" name="checkbox[]" id="checkbox" value="1"/>

Sign in to reply to this post

6/24/2010 3:58 am  |  #9 ijs174940Beta Tester

That works partly as if i submit with out selecting or adding content I get the correct warning for both form elements but if I tick one of the check boxs excluding the first only and I dont add the required text to the field I get the same warning about both missing. It appears that only the first box being ticked will prevent this from happening.

However by selecting any check box and adding the required text the form submits as it should so while the validation does work it could cause confusion if the final user selects the options oulined above.

I am not sure there is a workaround for this.

Sign in to reply to this post

6/24/2010 8:44 am  |  #10 ijs174940Beta Tester

i have now tried this in the real code and I am hitting an error which is related to the previous post

////////////////////////////
///this is the form tag///
///////////////////////////

<form action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>" method="post" name="LWV_1_ATC_0" id="LWV_1_ATC_0" onsubmit="WAValidateRQ(document.LWV_1_ATC_0.LWV_1_Quantity_Add,'Please enter the quantity you require.',document.LWV_1_ATC_0.LWV_1_Quantity_Add,0,false,'text');WAValidateRQ(document.LWV_1_ATC_0.Pub,'Please select which venues are to receive this design.',document.LWV_1_ATC_0.Pub,0,true,'checkbox');WAValidateRQ(document.LWV_1_ATC_0.designtype,'Please select the type of design you require.',document.LWV_1_ATC_0.designtype,0,true,'select');WAValidateRQ(document.LWV_1_ATC_0.designsize,'Please select what size you require for this design.',document.LWV_1_ATC_0.designsize,0,true,'select');WAAlertErrors('The following option(s) are required before we can add this design to you order\n\n','\n\nIf you are experiancing issues this order please call our support team on : 0844 504 6914 \n',false,document.getElementById('LWV_1_ATC_0'),false);return document.MM_returnValue">


/////////////////////////////////
///this is the checkbox loop //
/////////////////////////////////

<?php if (isset($_SESSION['site_lvl'])) {?>
<fieldset><legend><span class="logintxt">Venues to recieve this design</span></legend>
<input name="allbox" type="checkbox" onclick="flevToggleCheckboxes('LWV_1_ATC_0',true,false)" value="on" /> Select all venues<br />
<?php do { ++$i ?>
<input type="checkbox" <?php if (in_array($row_rs_member_list['ID'], $SelectedPubList, TRUE)) {echo "checked=\"checked\"";} ?> name="Pub[]" value="<?php echo $row_rs_member_list['ID'];?>" id="Pub" />

<?php echo $row_rs_member_list['PUB_NAME']; ?><br />

<?php } while ($row_rs_member_list = mysql_fetch_assoc($rs_member_list)); $i=0; ?><br /><input name="Re-calculate" class="cust_button" type="submit" value="Re-calculate" />
</fieldset>
<?php } ?>


//////////////////////

It appears that unless I tick the first checkbox in the list I get the validation error, totally confused now

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top
Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...