10
X

How to Validate Forms Using jQuery

Writing your own form validation code doesn't have to be a scary or time-consuming process. jQuery's Validation Plugin makes form validation easy and straightforward. validate To get started, all you need to do is link to the plugin files (files are also available for download if you'd prefer to host them locally) along with your standard jQuery library link.
JAVASCRIPT:
  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>

From there, you can start coding. Here's what the validation code might look like if you have a form with 4 different input fields (First Name, Last Name, Email, Password) you'd like to validate:
JAVASCRIPT:
  1. //we're going to run form validation on the #validate-form element
  2. $("#validate-form").validate({
  3. //specify the validation rules
  4. rules: {
  5. firstname: "required",
  6. lastname: "required",
  7. email: {
  8. required: true,
  9. email: true //email is required AND must be in the form of a valid email address
  10. },
  11. password: {
  12. required: true,
  13. minlength: 6
  14. }
  15. },
  16.  
  17. //specify validation error messages
  18. messages: {
  19. firstname: "First Name field cannot be blank!",
  20. lastname: "Last Name field cannot be blank!",
  21. password: {
  22. required: "Password field cannot be blank!",
  23. minlength: "Your password must be at least 6 characters long"
  24. },
  25. email: "Please enter a valid email address"
  26. },
  27.  
  28. submitHandler: function(form){
  29. form.submit();
  30. }
  31.  
  32. });

It's important to makes sure that the names of your input fields match your jQuery code, so for example, the HTML for the First Name input field should look something like this:
HTML:
  1. <input type="text" name="firstname">

Additionally, the id of your form needs to match the id called to validate in the first line of the above jQuery code, so in this case, the form's id would need to be #validate-form in order for this code to work. That's all it takes to create some basic form validation in only a few minutes! Read through the jQuery Validation Plugin's documentation to learn even more about how to utilize this helpful plugin.

10 jQuery Plugins to Play With JSON

In this post, find a list of jQuery plugins to play with JSON data. Using these plugins you can convert JSON data to tables, HTML, serialize objects, format JSON to make it more readable, generate treeview or even image sliders. 1. Dream.js Dreamjs DreamJS is a lightweight library to generate JSON data. This library can output random data from a JSON Schema using standard types like String, Number, Date, Boolean, Array, or with the 60+ built-in custom types like Name, Age, Address, Word, Sentence, paragraph, gender, (RGB) color etc. 2. jQuery JSONView

jQuery JSONView

jQuery JSONView is a plugin to view JSON in a more readable format. It offers some methods and options to customize.

3. jPut - JSON to HTML

jPut - JSON to HTML

jPut is a small jQuery plugin where you can append your JSON to customized HTML format easily. You can also dynamically bind values to your existing data easily. It's simple and fast. The jPut can call by using data attributes.

4. JSONslider

JSONSlider

JSONslider is a simple jQuery slider for pictures stored dynamically in a JSON file you can edit without messing up your HTML.

5. Mountable.js

Mountable

An easier way to pass JSON content into a HTML table using jQuery. It's tiny! Just 3KB, easy to customize.

6. JSONForms

JSONForms

JSONForms is an implementation of the algorithm for submitting form data as JSON. It converts any form into a structured JSON object.

7. jQuery Serialize Object

jQuery Serialize Object

jQuery Serialize Object converts HTML forms into JavaScript objects. It adds the method serializeObject to jQuery to perform complex form serialization into JavaScript objects.

8. jQuery Bonsai

jQuery Bonsai

Bonsai is a lightweight jQuery plugin that takes a big nested list and prunes it down to a small expandable tree control. Also includes support for checkboxes (including 'indeterminate' state) and for populating the tree using a JSON data source.

9. Columns

Columns

Columns is an easy way of turning JSON data into HTML tables that are sortable, searchable, and paginating. All you need is to provide the data, and Columns will do the rest.

10. Table-to-JSON

TableToJson

A jQuery plugin that converts an HTML Table into a JavaScript object. Great for working with user-editable tables or accessing output from 3rd party tools.

Build a Smooth Slide-Out Navigation Menu with jQuery

A smoothly-animated vertical navigation menu is a refreshing alternative to the standard horizontal navs, and can be created fairly easily with CSS and some simple jQuery.

tut2

Here's how it's done:

You'll need to start out with your basic <ul> navigation structure.
HTML:
  1. <ul id="navigation">
  2. <li class="home"><a href="#">home</a></li>
  3. <li class="about"><a href="#">about</a></li>
  4. <li class="search"><a href="#">blog</a></li>
  5. <li class="photos"><a href="#">portfolio</a></li>
  6. <li class="contact"><a href="#">contact</a></li>
  7. </ul>

And you'll need to add a little bit of styling. This is the CSS that I used, but feel free to get creative and make it your own:
CSS:
  1. ul#navigation {
  2. position: fixed;
  3. margin: 0px;
  4. padding: 0px;
  5. top: 10px;
  6. left: 0px;
  7. list-style: none;
  8. z-index:9999;
  9. }
  10.  
  11. ul#navigation li {
  12. width: 100px;
  13. }
  14.  
  15. ul#navigation li a {
  16. text-align: center;
  17. text-decoration: none;
  18. font-family: "Cabin";
  19. color: #555;
  20. font-weight: bold;
  21. font-size: 16px;
  22. display: block;
  23. margin-left: -2px;
  24. padding: 7px 0px;
  25. width: 100px;
  26. height: auto;
  27. background-color:rgba(255, 227, 220, .6);
  28. border:1px solid #AFAFAF;
  29. border-radius:0px 10px 10px 0px;
  30. box-shadow: 0px 2px 2px #333;
  31. }

Now you should have a good-looking vertical menu. Time to animate with jQuery.

This first  function will give the menu a margin-left of -90px as soon as the page loads. This allows users to see the menu before it smoothly disappears outside of the browser window so that they know it's there for them to use. The jQuery for this function is very straightforward:
JAVASCRIPT:
  1. $(function() {
  2.  
  3. $('#navigation a').stop().animate({'marginLeft':'-90px'},1000);
  4.  
  5. $('#navigation> li').hover(
  6. function () {
  7. $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  8. },
  9. function () {
  10. $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  11. }
  12. );
  13. });

All that's left to do is add a function that will reveal a menu item when it's hovered upon. This should do the trick:
JAVASCRIPT:
  1. $(function() {
  2. $('#navigation> li').hover(
  3. function () {
  4. $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  5. },
  6. function () {
  7. $('a',$(this)).stop().animate({'marginLeft':'-90px'},200);
  8. }
  9. );
  10. });

Now you've got a fun vertical nav that can be used to add some useful animation to any web page.  

The 10 best jQuery video plugins

jQuery is one of the simplest HTMLs to handle JavaScript. It allows users to compress long codes into one simple line. Its wide variety of plugins can also make adding video to websites easier as well. Video plugins help users to complete tasks quickly with ease. Here are the 10 best video jQuery plugins, which are free and easy to use.

1. Tubular

By using this jQuery plugin designers can set any YouTube video as the background of their site. It is easy to use this plugin, but designers should have pre-installed JavaScript and Flash Player before choosing Tubular for their video needs. Tabular is based on swfobject and jQuery.

2. BIGVIDEO.JS

This jQuery plugin will add fit-to-fill background video to a website easily. It can also play a series of videos on the background of a site. For devices that don’t support auto-play, video can be supported by displaying a big background image.

3. CuepointJS

This plugin allows designers to create and handle cue-points in an HTML5 video. It creates ‘an array of subtitles with the seconds’ and displays them.

4. jQuery Video Gallery

This is a simple and lightweight jQuery Video Gallery used for displaying .swf videos. These videos are displayed in a window when a thumbnail is selected.

jquery-video-plugin

5. jPlayer

This plugin is an open source media library. It is written in JavaScript and is completely free. Users can quickly add a video or audio to a web page using jPlayer.

6. BigScreen

Designers can use the JavaScript Fullscreen API through this simple library. Fullscreen mode on a site or app can be easily achieved using BigScreen. Many more productive features are provided by this jQuery video plugin.

7. Video LightBox

Embed a video into a site, page or blog with a few clicks using this free wizard program. Designers need not write even a single line of code for embedding a video with this tool.

8. Popcorn.js

This is an HTML5 media framework which is written in JavaScript. It is a useful plugin for filmmakers, developers, designers and others to create time-based interactive media. This video jQuery plugin is a part of Mozilla’s Popcorn project.

jquery-video-plugin

9. jQuery Webcam Plugin

Users can access their webcams in three modes using this plugin. Designers can use callback mode, save mode and stream mode to get the job done. Users can access the different modes  via a small API directly with JavaScript or jQuery.

10. FitVids.JS

FitVids.JS is a lightweight video plugin used for fluid width video embeds that is easy to use.

jquery-video-plugin

Add any type of video or audio to a website, web page or blog using any one of the  jQuery plugins mentioned above. These plugins are easy to use and allow designers to embed videos within a few clicks, without writing even a single line of code.

Create a Responsive Navigation Menu Using jQuery

With more and more people accessing the web from mobile devices and tablets every day, it's becoming increasingly important for websites to be responsive, and one of the most important aspects of a mobile friendly website is a responsive navigation. Creating a mobile-friendly navigation menu without the use of a plugin might seem like a daunting task, but one can actually be created fairly easily with some media queries and a few lines of jQuery. Start with your standard navigation menu, which can be styled however you like, and probably looks something like this:
HTML:
  1. <div id="menu">
  2.  
  3. <ul>
  4. <li><a href="#">Link One</a></li>
  5. <li><a href="#">Link Two</a></li>
  6. <li><a href="#">Link Three</a></li>
  7. <li><a href="#">Link Four</a></li>
  8. </ul>
  9. </div>

Next, you're going to need to add some jQuery to your code.
JAVASCRIPT:
  1. $("#menu").addClass("responsive").before('<div id="three-lines">&#9776;</div>');

This line of jQuery adds the CSS class responsive to the #menu div. and adds the div #three-lines before #menu.responsive. The #three-lines div is what creates the ☰ character that will replace the navigation menu when the screen gets to a certain width. This line of jQuery won't work properly unless we add some styling. We're going to need a media query to make sure that #menu.responsive becomes hidden when the screen gets to a certain width, and one that allows #three-lines to show up at that same point.
CSS:
  1. @media screen and (max-width: 700px){
  2. #menu.responsive{
  3. display: none;
  4. }
  5. }
  6.  
  7. @media screen and (min-width: 700px){
  8. #three-lines{
  9. display: none;
  10. }
  11. }

Now the default navigation menu will display when the browser window is above 700px, but when the window becomes smaller than 700px, it will disappear and the #three-lines icon will become visible. All that's left to do is add one more jQuery function that toggles the navigation menu when the #three-lines div is clicked.
JAVASCRIPT:
  1. $("#three-lines").click(function(){
  2. $("#menu").toggle();
  3. })

Now when the ☰ icon is clicked, the #menu div will appear. It will disappear if the ☰ icon is clicked a second time. Customize the responsive menu by adding your own styling or effects.

10 jQuery plugins with full screen support

Developers can check out the list below of jQuery plugins that provide full screen support. These plugins provide full screen website, image galleries, editor, slider, menu, loading bar, Youtube videos and modal windows.

1. fullPage.js

fullPage.js is a simple and easy to use plugin to create full screen scrolling websites (also known as single page websites or one page sites). It allows the creation of full screen scrolling websites, as well as the addition of some landscape sliders inside the sections of the site.

fullPage js

2. fullsizable 

fullsizable is a jQuery plugin that allows designers to make use of the available browser space for more enjoyable image viewing.

fullsizable

3. jQuery Fullscreen Editor

jQuery Fullscreen Editor plugin transforms text fields to customizable editors, either it can be used within a form or as a stand alone.

jQuery_Fullscreen_Editor

4. YoutubeBackground

This jQuery plugin for Youtube API allows designers to embed  YouTube videos into their web pages as a video background.

jQuery Youtube Background

5. Full Content

Full Content is a jQuery plugin that enables full screen single-page websites with url hash & animated scrolling.

fullContent js

6. HoldOn.js

HoldOn.js is a jQuery plugin to prevent user interaction while a webpage is loading or busy by displaying a full screen loading indicator.

HoldOn js

7. Alton

Alton is a jQuery-powered scrolling plugin that utilizes custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes scrolljacking idea, but greatly improves the often-poorly-implemented scrolljacking experiences designers might be used to.

Alton

8. JiSlider

JiSlider is a simple jQuery Plugin used to create an Image Slider. The settings can be modified to create the desired the slider.

JiSlider

9. animatedModal.js

animatedModal.js is a jQuery plugin that creates a full screen modal with CSS3 transitions. Designers can use the transitions from animate.css or create their own transitions.

animatedModal js

10. jQuery - fatNav

jQuery favNav creates a chubby full screen menu with nice hamburger toggle.

jQuery_fatNav


Advertise on our network
See our other websites