How to Validate Multiple Check Boxes in JavaScript?
Following example shows you how to validate multiple checkboxes using JavaScript as client side validation.
Multiple Check Boxes allows the user to select more than one item from the group. In some cases you may want to use multiple check boxes to make some selections. As a example you may need to select preferred subjects of a student(Maths, Science, English etc.). Some times you may want to select a features of a program using multiple check boxes. In such situations you should validate check box-selections before submitting the form.
Use following multiple check box selection example to study the Multiple Checkboxes validation in JavaScript.
This sample contains three Check Box Groups. First you have to select at least 3 mobile phone manufactures from first check box group. Then you have to select at least 4 features of the mobile phone. After that you have to select the camera resolution from the third multiple select check box. If you forget to make a selection from a check box group, you are prompted to make a selection from appropriate check boxes from that group.
* In this example there are tow error message types used to indicate the error. Select one error message type in your program.
Demo- Validate Multiple Check Boxes Using JavaScript
Try it!
1. Example code for validate Multiple Check Boxes using JavaScript.
JavaScript Code
<script type="text/javascript" language="javascript">
<!--
function validateMultipleCheckBoxes(checkBoxGroupName,checkdBoxes,exactlyEqual,errorContainer,errorMessage){
var formName = "formCheckBoxValidator";
var form = document.forms[formName];
var noOfCheckBoxes = form[checkBoxGroupName].length;
var isChecked = false;
var checkedCheckBoxes = 0;
for(var x=0;x<noOfCheckBoxes;x++){
if(form[checkBoxGroupName][x].checked==true){
checkedCheckBoxes++;
}
}
if(exactlyEqual==true){
if(checkedCheckBoxes!=checkdBoxes){
document.getElementById(errorContainer).innerHTML=errorMessage;
return false;
}else{
document.getElementById(errorContainer).innerHTML="";
return true;
}
}else{
if(checkedCheckBoxes<checkdBoxes){
document.getElementById(errorContainer).innerHTML=errorMessage;
return false;
}else{
document.getElementById(errorContainer).innerHTML="";
return true;
}
}
}
function validateCheckBox(){
var errorMessage="Error!\nInvalid Selection";
if(!validateMultipleCheckBoxes("mobilePhoneManufactures[]",3,false,"mobile_phones","Please select at least three<br>mobile phone manufactures")){alert(errorMessage);return false;}
if(!validateMultipleCheckBoxes("checkBoxFeature[]",4,false,"features","Please select at least four<br>mobile phone features")){alert(errorMessage);return false;}
if(!validateMultipleCheckBoxes("checkBoxCamera[]",1,true,"camera","Please select a camera resolution")){alert(errorMessage);return false;}
alert("OK\nYour selection is valid!");
return true;
}
-->
</script>
Html Code
<html>
<head>
<title>How to Validate Multiple Check Boxes Using JavaScript </title>
</head>
<body>
<table table border="0" align="center" cellpadding="3" cellspacing="1" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;background-color:#336600;">
<tr>
<td bgcolor="#FFFFF0">Select at least three mobile<br /> phone manufactures. </td>
<td bgcolor="#FFFFF0"><table width="100%" border="0">
<tr>
<td align="left"><label>
<input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" />
</label></td>
<td align="left">Nokia</td>
<td align="left"><input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" /></td>
<td align="left">Samsung </td>
</tr>
<tr>
<td align="left"><label>
<input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" />
</label></td>
<td align="left">Panasonic </td>
<td align="left"><input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" /></td>
<td align="left">Sony Ericsson</td>
</tr>
<tr>
<td align="left"><label>
<input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" />
</label></td>
<td align="left">Motorola</td>
<td align="left"><input name="mobilePhoneManufactures[]" type="checkbox" id="mobilePhoneManufactures[]" value="checkbox" /></td>
<td align="left">Sharp</td>
</tr>
</table>
<label></label></td>
<td bgcolor="#FFFFF0" id="mobile_phones" style="color:#FF0000;"> </td>
</tr>
<tr>
<td bgcolor="#FFFFF0"> select at least 4 fetures.</td>
<td bgcolor="#FFFFF0"><table width="100%" border="0">
<tr>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">FM Radio</td>
<td align="left"><input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" /></td>
<td align="left">Email - SMTP,<br /> POP3 and IMAP4<br />
Protocols </td>
</tr>
<tr>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">GPRS</td>
<td align="left"><input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" /></td>
<td align="left">WAP 2.0/xHTML</td>
</tr>
<tr>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">Video Camera </td>
<td align="left"><input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" /></td>
<td align="left">Java™</td>
</tr>
<tr>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">Bluetooth™ </td>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">3G</td>
</tr>
<tr>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">IR</td>
<td align="left"><label>
<input name="checkBoxFeature[]" type="checkbox" id="checkBoxFeature[]" value="checkbox" />
</label></td>
<td align="left">Voice Dialling</td>
</tr>
</table></td>
<td bgcolor="#FFFFF0" id="features" style="color:#FF0000;"> </td>
</tr>
<tr>
<td bgcolor="#FFFFF0">Select a camera resolution </td>
<td bgcolor="#FFFFF0"><table width="100%" border="0">
<tr>
<td><label>
<input name="checkBoxCamera[]" type="checkbox" id="checkBoxCamera[]" value="checkbox" />
</label></td>
<td>1.0 Megapixel Camera </td>
</tr>
<tr>
<td><label>
<input name="checkBoxCamera[]" type="checkbox" id="checkBoxCamera[]" value="checkbox" />
</label></td>
<td>2.2 Megapixel Camera </td>
</tr>
<tr>
<td><label>
<input name="checkBoxCamera[]" type="checkbox" id="checkBoxCamera[]" value="checkbox" />
</label></td>
<td>3.0 Megapixel Camera </td>
</tr>
<tr>
<td><label>
<input name="checkBoxCamera[]" type="checkbox" id="checkBoxCamera[]" value="checkbox" />
</label></td>
<td>5.0 Meagpixel Camera </td>
</tr>
</table></td>
<td bgcolor="#FFFFF0" id="camera" style="color:#FF0000;"> </td>
</tr>
<tr>
<td bgcolor="#FFFFF0"> </td>
<td bgcolor="#FFFFF0"> </td>
<td bgcolor="#FFFFF0"><input name="btnValidateForm" type="button" id="btnValidateForm" value="Check Selection" onclick="javascript:validateCheckBox();"/></td>
</tr>
</table>
</body>
</html>
©-Copyright By Duminda Chamara
JavaScript Validation
1 comments:
collagen maihada mua o dauViên collagen của mỹ A,E,C Alozen sản phẩm giúp bổ sung collagen nhanh chống, đồng thời cung cấp đầy đủ vitamin thiết yếu giúp đảm bảo sự dẻo dai và đàn hồi cho da, mang lại làn da căng tràn sức sống. phân biệt collagen +C Quan trọng nhất vẫn là viên thuốc, khi bạn cầm viên Collagen hàng thật trên tay sẽ thấy dính bám vào viên thuốc, Collagen dạng viên có mùi khét khét ( mùi đặc trưng vì chứa chất Collagen 1 và 3 cùng với 19 acid amin ). Hàng giả thì không như vậy, Viên thuốc được làm giả bằng các loại bột, không mùi, cầm trên tay sẽ trơn tuột, tay thì không thấy dính. Để tan trong nước thì thuốc thật sẽ có màu vàng ngà còn thuốc giả thì có màu trắng. uong collagen nhu the nao la tot nhatĐặc tính quan trọng nhất của Collagen là sự đàn hồi, tức là có thể giãn ra và co lại như một sợi dây thun. Tính đàn hồi này giúp nó có chức năng tạo nên hình dạng nhất định cho các cơ quan. Tất cả những mô có tính nhu động, cử động, co giãn… đều dựa trên sự co giãn của sợi collagen. fine pure collagenCollagen: đây là loại protein chính hình thành nên cấu trúc da, nó có tác dụng như một chất kết dính giữa các mô trong cơ thể. Collagen còn là thành phần chính của gân, dây chằng, sụn, xương và răng trong cơ thể. Bổ sung collagen sẽ giúp tái tạo độ đàn hồi cho da, chống lão hóa, chảy sệ đồng thời giúp các bộ phần khác trên cơ thể khỏe mạnh hơn. uong callogen bao lau co tac dungMỗi ngày uống một lọ tinh chất làm đẹp Collagen Adiva là bí quyết để có làn da tươi trẻ và căng mịn. Vậy uống Adiva trong bao lâu? Uống vào lúc nào để có hiệu quả tốt nhất? tuoi nao nen uong callogenKhông chỉ làm đẹp bề mặt bên ngoài,Collagen còn là thành phần chính của xương ,tóc,sụn,giác mạc, dây chằng.Nói chung uống Collagen chỉ có lợi và với chị em phụ nữ nếu có điều kiện thì nên chăm sóc da ngay từ khi còn trẻ sẽ hiệu quả hơn nhiều khi da đã bị lão hóa viên uống fine pure collagenGIEN kết hợp với collagen là một công nghệ mới trẻ hóa từ bên trong, giúp cơ thể sản sinh ra các tế bào khỏe mạnh, làm mờ các nếp nhăn sâu & xóa các nếp chân chim, tăng cường hệ miễn dịch, chống lại bệnh tật. cung cấp dinh dưỡng cho bà bầu mang thai tháng thứ 8đây là điều mà được rất đông đảo mọi người quan tâm ko chỉ riềng bà bầu mà còn có cả chồng và mẹ chồng đều quan tâm đến điều này, nếu vậy hãy đọc và chia sẽ để mọi người cùng biết nhé hạt điều dùng để làm gì
Post a Comment