Jump to content

checkbox validation on click


vinpkl
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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 by vinpkl
Link to comment
Share on other sites

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 by PravinS
Link to comment
Share on other sites

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>

 

 

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.