Archive for January, 2016

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.