jQuery Tutorial Demo: Select All Checkboxes & validate Form

This tutorial will teach you to add validation using JQUERY validate.js file and get multiple checkbox valu using JQUERY jquery.js file.

These two js files jquery.js , jquery.validate.js is very useful when user wants to do validation of form on client side server .

Here the attached code.just download these two js files from JQUERY site and embedd in below code and run the file on browser .

<title>jQuery Tutorial Demo: Select All Checkboxes</title>
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript” src=”/jquery/jquery.validate.js”></script>
<style type=”text/css”>body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}
h1, h2{font-size:20px;}</style>

<script type=”text/javascript”>
var checked_status = this.checked;
this.checked = checked_status;

//initiate validator on load
$(function() {
// validate contact form on keyup and submit
//set the rules for the field names
rules: {
first_name: {
required: true,
minlength: 2
last_name: {
required: true,
minlength: 2
email: {
required: true,
email: true
company: {
required: true,
minlength: 2
//set messages to appear inline
messages: {
first_name: “*Please enter First Name”,
last_name: “*Please enter Last Name”,
email: “*Please enter a valid Email address”,
company: “*Please enter Company Name”

<style type=”text/css”>
.error {
color: red;
font: 12pt verdana;
padding-left: 10px

<h1>jQuery Tutorial: Multiple Checkbox values & Validation of FORM </h1>
<p>You will learn how to select/deselect all checkbox and get all the values of checked box.<br/>
This will also teach you to validate your FORM using JQUERY validate.js.
if(isset($_POST) && !empty($_POST))
<form name=”myform” action =”#” id=”userForm” method=’post’ enctype=’multipart/form-data’>
<label for=”first_name”>First Name</label><br />
<input name=”first_name” id=”first_name” /><br />
<label for=”last_name”>Last Name</label><br />
<input name=”last_name” id=”last_name” /><br />
<label for=”email”>Email address/Username</label><br />
<input name=”email” id=”email” /><br />
<label for=”company”>Company</label><br />
<input name=”company” id=”company” /><br /><br />
<input type=”checkbox” name=”paradigm[]” value=”Imperative”>Imperative<br/>
<input type=”checkbox” name=”paradigm[]” value=”Object-Oriented”>Object-Oriented<br/>
<input type=”checkbox” name=”paradigm[]” value=”Functional”>Functional<br/>
<input type=”checkbox” id=”paradigm_all”>Select All<br><br />
<input type=”submit”  value=”save” />



One Response

  1. Nice article.
    But I have a few questions:
    (1) Where do I put this code? In a node?
    (2) In your example, how or where is the form defined? And where does the data get “stored”?
    (3) Lastly but most importantly: How would I do the for a Webform?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: