Jump to content

checkbox validation on click

vinpkl

By vinpkl
in Javascript Help

 Share

Recommended Posts

vinpkl Regular Member

vinpkl

Posted
Posted

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
https://forums.phpfreaks.com/topic/288646-checkbox-validation-on-click/
Share on other sites
PravinS Member

PravinS

Posted
Posted

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 Regular Member

vinpkl

Posted
  • Author
Posted (edited)

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
PravinS Member

PravinS

Posted
Posted (edited)

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
vinpkl Regular Member

vinpkl

Posted
  • Author
Posted

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 Member

PravinS

Posted
Posted

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 Regular Member

vinpkl

Posted
  • Author
Posted

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;
}
This thread is more than a year old. Please don't revive it unless you have something important to add.

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
Go to topic listing
×
×
  • 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.