Having problems with checkbox validations? Then you’re not alone. Checkbox validation is usually more difficult due to its nature of having multiple values at the same time.

Consider this simple form where a user is required to select at least one checkbox:
Which of the following jQuery selectors do you usually use?
(Please select at least one)

#id

.class

element[@attribute]

Which of the following jQuery events do you usually encounter?
(Please select at least one)

click

focus

change

blur

submit

<b>Which of the following jQuery selectors
do you usually use? (Please select at least one)</b><br>
<input type="checkbox" name="selector[]"
id="selector" value="id">#id<br>
<input type="checkbox" name="selector[]"
id="selector" value="class">.class<br>
<input type="checkbox" name="selector[]"
id="selector" value="element">element[@attribute]<br><br>

<b>Which of the following jQuery events
do you usually encounter? (Please select at least one)</b><br>
<input type="checkbox" name="event[]"
id="event" value="click">click<br>
<input type="checkbox" name="event[]"
id="event" value="focus">focus<br>
<input type="checkbox" name="event[]"
id="event" value="change">change<br>
<input type="checkbox" name="event[]"
id="event" value="blur">blur<br>
<input type="checkbox" name="event[]"
id="event" value="submit">submit<br>

So how do we do the validation?

First we’ll have to bind the validations with the form’s submit event (submit() event on jQuery) and return false for all empty checkbox groups to prevent the form triggering its submission.

Without using jQuery, you’ll have to iterate through all of the checkbox elements, then check for the checked status of each individual check boxes (if none is checked then return false). And you’ll have to do this for each check box grouping.

However, jQuery makes things a little bit easier by introducing a selector filter for checked elements.
Using the :checked filter, it will select all of the checked elements for a particular element. so in this case,

$("input:checked")

will select all of the checked input elements. However, this is a downside for this. The :checked filter does not support #id and .class selectors so the following won’t work:

$("#selector:checked")
$("#event:checked")

So how do we work around this? Its pretty simple, by specifying the id, class, or even as an attribute, we can now separate the checkboxes according to its grouping. In this example, we are going to be using the #id to separate our checkboxes.

var selector_checked = $("input[@id=selector]:checked").length;
var event_checked = $("input[@id=event]:checked").length;
if (selector_checked == 0)
{
	return false;
}
else if (selector_checked == 0)
{
	return false;
}
else
{
	return true;
}

Its much simpler than iterating through each checkbox, since jQuery automatically does this for us. For two different checkbox groups, this is acceptable. However, when we would need to deal with more checkbox groupings, this can become a problem since the code will become more cluttered by then.

To simplify things, we’ll just make our own function passing the #id as a parameter to check for each checkbox group’s status. This is how the script would finally look like.

$(document).ready(function()
{
	$("form").submit(function()
	{
		if (!isCheckedById("selector"))
		{
			alert ("Please select at least one selector");
			return false;
		}
		else if (!isCheckedById("event"))
		{
			alert ("Please select at least one event");
			return false;
		}
		else
		{
			return true; //submit the form
		}
	});

	function isCheckedById(id)
	{
		var checked = $("input[@id="+id+"]:checked").length;
		if (checked == 0)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
});

• View Demo
• Download Source

Most client-side validation nowadays is usually made through onsubmit validations. Although it is pretty convenient, it may be quite annoying for a user to find only at the end that most of their inputs are invalid and must enter them once again. If onblur validations is not enough, keyperss validation is the next step.

Here is another alternative to the usual onsubmit validations for forms. Instead of validating a form only at the end, why not validate it as the user is typing their input. This is where keypress validations come in. We can capture it through the onkeypress event.

Here are some examples of keypress validations:

Only integers are allowed:
Only alphanumeric characters are allowed:
No spaces are allowed:

Here is an example keypress validation function: Read more »

Here is another jQuery tutorial demonstrating how to perform text validations using jQuery’s blur() event.

Its a fact that client-side client validation is no alternative to server-side validation especially in web applications. However, that doesn’t mean that we should drop client-side validation altogether. The truth is that client-side validation enhances a web application. First, the client-side validations provide a more responsive interface for users. Secondly, for a very large enterprise-grade application, shifting some of the validations on the client as a first pass filter will reduce the load on the server and improve its performance.

Now let’s move on to the tutorial. First of all, I’m going to use a simple registration form as an example for validation. Here is the demo for this tutorial:

Username: Username must be at least 4 characters in length

Password: Password must be at least 6 characters in length

Read more »

In this next tutorial, I will demonstrate how to perform input validation on AJAX forms using the jQuery form plugin.

The requirements for this tutorial are:

Basic knowledge of jQuery

Basic knowledge of jQuery form plugin usage

Basic knowledge of javascript

and the required files for this tutorial are:

jQuery library

jQuery form plugin

Before we start with this tutorial, let me make one thing clear:

Client-side input validation is no substitute for server-side validation.
Client-side validation can be easily bypassed, and should be treated more as an enhancement for the form.

now let us continue with the tutorial Read more »

While I was securing an email form at work, I noticed that making a secure web form in PHP is really hard if not impossible. While reading the server logs, I found that spammers were now using email form injections to send spam. Let’s analyze why its hard to properly secure a web form: Read more »