dynamic check boxes validation

Report · May 28, 2013

Hi all,

I have the query is displayed the check boxes. I'd to validate and make sure at least one check box needs to be checked. The code i have below is not working. Can you please help.

Thanks

KT

script type="text/javascript">

function validate(oForm) {

var numChecked = 0;

for (var idx=0; idx<oForm.category.length; idx++) {

if (oForm.category[idx].checked == true) {

numChecked++;

break;

}

if (numChecked > 0) {

return true;

} else {

alert('Please check at least one checkbox');

return false;

}

</script>

<html>

<body>

<input type="checkbox" name="category" id="category">#cat_var#

</cfoutput>

</form>

</body>

</html>

Report · May 28, 2013

ID elements on a page have to be unique. As you're looping over a query, I'm guessing you're ending up with multiple checkboxes, all of them with ID=category. So document.getElementById("category") doesn't know which checkbox you're interested in (getElementById only returns 1 element). You might want to look at either something like jQuery's .each(), or simply document.getElementsByClassName

Report · May 28, 2013

Avoid using reserved words for id/name ("form").

^_^

Report · May 28, 2013

ok, i got the check box working, but it not checking for other fields on the page. Can you pls advice this?

function validateForm(oForm) {

//checkboxes

var numChecked = 0;

for (var idx=0; idx<oForm.category.length; idx++) {

if (oForm.category[idx].checked == true) {

numChecked++;

break;

}

if (numChecked > 0) {

return true;

} else {

alert('Please check at least one checkbox');

return false;

}

/'/comments

if (oForm.getElementById ("comments").value.length == 0)

alert ("Please enter a search field");

return false;

}

</script>

Report · May 28, 2013

The problem is you are returning true/false before you try to validate the comments field. Assuming you don't want to do alerts for both the checkbox and the comments field at the same time, then simply remove the

"return true;" statement:

if (numChecked === 0) {

alert('Please check at least one checkbox');

return false;

}

Report · May 28, 2013

Thanks for your repond. The validate seems working with displayed message, but even i checked the checkbox, enter the comments, hit submit button,but it didn't go any where. submit button seems didn't do anything.

function validateForm(oForm) {

//checkboxes

var numChecked = 0;

for (var idx=0; idx<oForm.category.length; idx++) {

if (oForm.category[idx].checked == true) {

numChecked++;

break;

}

if (numChecked == 0){

alert('Please check at least one checkbox');

return false;

}

//comments

if (document.getElementById ("comments").value.length == 0)

alert ("Please enter a search field");

return false;

}

</script>

Report · May 28, 2013

the very last statement in your validateForm function should be "return true;"

Also you have a mistake in the code. You've got:

if (document.getElementById ("comments").value.length == 0)

alert ("Please enter a search field");

return false;

}

However you don't have an opening { on that IF statement. And the closing } we can see is for the function itself, not that IF.

So it's really doing it like this:

if (document.getElementById ("comments").value.length == 0) {

alert ("Please enter a search field");

}

return false;

}

i.e. it always returns false for your validate function. Change that last bit of the code like so:

if (document.getElementById ("comments").value.length == 0) {

alert ("Please enter a search field");

return false;

}

return true;

}

Report · May 28, 2013

thank you very much.

i dont know much about the javascript, but unfortunately my form needs javascript validation.

i have another quuestion. i have the form with several fields, but i only need to validate if radio is selected w/o enter name into name field. I want to display message both coditions are meet. - thanks

function checkRadios(form) {

var btns = form.r0;

for (var i=0; el=btns; i++) {

if (el.checked) return true; {

if (document.getElementById ("name").value.length == 0){

}

alert('name must be entered');

return false;

}

return true;

}

</script>

one<input type="radio" name="r0" value="1"><br>

</form>