Making a JS array unique isn’t a simple one-liner. This short article is for developers trying to make a JavaScript array unique without leaving holes in your array. Sorting an array in JavaScript is simple in most cases. Just call the sort() method on the array like so.

var my_array = [5, 2, 4, 6, 9];
my_array.sort();

One caveat to be aware of with this method of sorting is that it performs a non-lexicographical sort, which might be confusing for human users if you display it on screen. Depending on your requirements, you might want to change your sorting algorithm. Check out Brian Huisman’s article on the subject.

After sorting the array, the following snippet will remove any duplicate entries

for ( var i = 1; i < my_array.length; i++ ) {
    if ( my_array[i] === my_array[ i - 1 ] ) {
        my_array.splice( i--, 1 );
    }
}

This will iterate over each element in the array, attempting to find elements where the value is equal to the previous value. If they are equal, we have found a duplicate so we remove it using splice.

A complete function for sorting and making an array unique in JavaScript would look like the following

function sort_and_unique( my_array ) {
	my_array.sort();
	for ( var i = 1; i < my_array.length; i++ ) {
		if ( my_array[i] === my_array[ i - 1 ] ) {
					my_array.splice( i--, 1 );
		}
	}
	return my_array;
};

Image Loading Instructions

• Include jQuery
• Include jquery.krioImageLoader.js
• Instantiate the plugin on the wrapper
• $(“#test”).krioImageLoader();
• Watch it load

View the Demo
Download or fork on GitHub

This is the first entry in a series that will cover many different types of input. First, we will make a form that can only be submitted when a user inputs a proper email address.

The Form

First things first, let build our HTML form.

<form method="post" action="">

<input id="email" type="text" name="email"/>

<input type="submit" name="emailSubmit" onclick="return checkEmail();"/>

</form>

Anything out of the ordinary here? First, you should notice the id=”email” in the email input box. Because of this id=”email” we are able to find out what the user has entered using JavaScript. Next,  in the submit input box, you should see onclick=”return checkEmail();”, which is what tells JavaScript to call our JavaScript function, which will validate the email address. ‘return’ is used because if the function returns false, it will not submit the form, but if it returns true, the form will be submitted.

The JavaScript

Here is the JavaScript for the validation. This should be placed between the head tags of the HTML document.

<script type="text/javascript">

 function checkEmail()
 {

 var email = document.getElementById('email').value;

 emailExpression = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

 if(!email.match(emailExpression))
 {
 alert("Please enter a valid email!");
 return false;
 }

 return true;
 }

 </script>

First we create the function checkEmail which will run when the submit button is pressed. Next we grab what the user has entered in the email box with the line: var email = document.getElementById(‘email’).value; We store this value in the email variable. Next, we create our regular expression, which will be used to validate the email address.

You will then find an IF statement. This is used to actually compare the regular expression to the email variable, which we got from the form. If it does not match, an alert is placed on screen, and the form IS NOT submitted, however if it is an email address, the statement returns true and the form is submitted as normal.

I hope that this helps you begin to understand how you can validate forms on the client side using JavaScript. I will be expanding this series to include new types of input validation and ways of notifying the user.