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 .

<html>
<head>
<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”>
$(document).ready(function()
{
$(“#paradigm_all”).click(function()
{
var checked_status = this.checked;
$(“input[name=paradigm[]]”).each(function()
{
this.checked = checked_status;
});
});
});

//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$(“#userForm”).validate({
//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”
}
});
});

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

<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.
</p>
<br/><br/>
<?php
if(isset($_POST) && !empty($_POST))
{
var_dump($_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 />
<label>Role</label><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” />

</body>
</html>

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: