checkbox validation on click

vinpkl · May 21, 2014

Hi all

The below validation code works fine when the form gets submit.

But i want to apply validation "onclick" of button instead of "onsubmit"

How can i apply validation "onclick" of button instead of "onsubmit"

<html>
<head>
<script language="javascript">
function checkForm(frm){
var destCount = frm.elements['dest[]'].length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(frm.elements['dest[]'][i].checked){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post" onSubmit="return checkForm(this);">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  " />
</form>
</body>
</html>

Thanks

Vineet

PravinS · May 21, 2014

Just remove onsubmit="return checkForm(this);" from form tag and add it to button as onclick="return checkForm(this);"

Use this

<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm(this);"/>
</form>

vinpkl · May 21, 2014

Hi Pravin

I just tested your code but it doesnt show alert.

it doesnt works

vineet

<html>
<head>
<script language="javascript">
function checkForm(frm){
var destCount = frm.elements['dest[]'].length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(frm.elements['dest[]'][i].checked){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm(this);"/>
</form>
</body>
</html>

Edited May 21, 2014 by vinpkl

PravinS · May 21, 2014

use this code


<html>
<head>
<script language="javascript">
function checkForm(){
var obj = document.getElementsByName('dest[]');
var destCount = obj.length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(obj.checked == false){
destSel = true;
break;
}
}

if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm();"/>
</form>
</body>
</html>

also check the jsfiddle

Edited May 21, 2014 by PravinS

vinpkl · May 21, 2014

Hi Pravin

I tried your code.

It is showing the alert even if i have checked 2 checkboxes.

I dont want to show alert if the checkboxes have been checked.

Vineet

<html>
<head>
<script language="javascript">
function checkForm(){
var obj = document.getElementsByName('dest[]');
var destCount = obj.length;
var destSel   = false;
for(i = 0; i < destCount; i++){
if(obj.checked == false){
destSel = true;
break;
}
}
if(!destSel){
alert('Select one or more destinations');
}
return destSel;
}
</script>
</head>
<body>
Select at least one destination
<form action="" method="post">
<input id="cx" type="checkbox" name="dest[]" value="CX" />   <label for="cx">Cox's Bazar</label><br />
<input id="su" type="checkbox" name="dest[]" value="SU" />   <label for="su">Sundarban</label><br />
<input id="sy" type="checkbox" name="dest[]" value="SY" />   <label for="sy">Sylhet</label><br />
<input id="ch" type="checkbox" name="dest[]" value="CH" />   <label for="ch">Chittagong</label><br />
<br />
<input type="submit" name="Go" value="  Go  "  onclick="return checkForm();"/>
</form>
</body>
</html>

PravinS · May 21, 2014

use this updated javascript function

function checkForm()
{
	var obj = document.getElementsByName('dest[]');
	var destCount = obj.length;
	var destSel   = false;
	for(var i = 0; i < destCount; i++)
	{
		if(obj[i].checked == true)
			destSel = true;
	}
	if(destSel == false)
	{
		alert('Select one or more destinations');
	}
	return destSel;
}

vinpkl · May 21, 2014

Hi Pravin

This code works perfect.

Thanks a lot

Vineet

use this updated javascript function

function checkForm()
{
	var obj = document.getElementsByName('dest[]');
	var destCount = obj.length;
	var destSel   = false;
	for(var i = 0; i < destCount; i++)
	{
		if(obj[i].checked == true)
			destSel = true;
	}
	if(destSel == false)
	{
		alert('Select one or more destinations');
	}
	return destSel;
}

Sign In

checkbox validation on click

Recommended Posts

vinpkl

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

PravinS

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information