jquery4u.com - Archives (aout 2016)

This popular article was updated on 18th August, 2016 to correct some minor errors and reflect the current version of the library. This tutorial shows you how to set up a basic form validation with jQuery, demonstrated by a registration form. We’re going to use the jQuery Validation Plugin to validate our form. The basic […]

Continue reading %Basic jQuery Form Validation Example (2mins)%

HTML5 introduced new form attributes so that the browser could validate forms natively. With CSS3 and JavaScript you can realize a basic form validation without the need of a plugin – as described in this article. But this has a few restrictions:

• Error messages are left to the browser itself, you can only provide titles of input fields
• You aren't able to customize the styling of error messages
• You'll have to create patterns for input fields yourself

The following 10 jQuery form validation plugins set themselves the goal of customizing error messages and styling, as well as simplifying the creation of validation rules.

1. Parsley

An extensible plugin that offers ordinary options like localization and custom validation rules, but also a remote Ajax validation. The documentation is clean and easy to read and the project is actively maintained. Validation rules can be controlled using HTML5 form or custom data attributes.

See the Pen Parsley Plugin Demo by SitePoint (@SitePoint) on CodePen.

Website
Source code

2. jQuery Form Validator

A modular plugin, that offers a basic set of validation rules by default and lets you load further modules on demand. For example: a file validator when uploading files, but also date, security or location modules. It also allows you to provide input suggestions. The validation is controlled with HTML5 data attributes.

See the Pen jQuery Form Validator Plugin Demo by SitePoint (@SitePoint) on CodePen.

Website
Source code

3. jQuery Validation Plugin

One of the first validation plugins from 2006. It lets you specify custom validation rules using HTML5 attributes or JavaScript objects. It also has a lot of default rules implemented and offers an API to easily create rules yourself. Finding detailed information about the plugin may be hard at first and it's limited to jQuery 1.x, but they promised to make it better – see this campaign.

See the Pen jQuery Validation Plugin Demo by SitePoint (@SitePoint) on CodePen.

Website
Source code

Continue reading %10 jQuery Form Validation Plugins%

Whether you want to manipulate the content of an element on a web page, attach an event to it, or do something else, you will need to select it first. This is where jQuery selectors come into play: they form a crucial part of the library.

In this tutorial, I will cover all of these selectors and point out important things that you need to keep in mind while using them.

jQuery Selectors

The main purpose of these selectors is to select elements on a web page that meet certain criteria. The criteria can be anything like their id, classname, attributes or a combination of any or all of these. Most of the selectors in jQuery are based on existing CSS selectors but the library also has its own custom selectors.

Basic selectors

You can select elements on a webpage using their ID $("#id"), their class $(".class") or their tag name $("li") . You can also use a combination of these selectors like $(".class tag") or select combined result of multiple selectors like $("selectorA, selectorB, selectorC").

jQuery also offers few other basic selectors that I have listed below:

• :header Selector — Let's say you have to select all the headings like <h1>, <h2>, <h3> in a <section>. In this case, you could either use the verbose $("section h1, section h2, section h3") selector or the much shorter $("section :header") selector. Both will do the same job and the latter one is comparatively easier to read. The header selector has set the background of all headlines to yellow in this demo.

• :target Selector — This selector returns the element whose id matches the fragment identifier or hash of the document's URI. For instance, if the URI is "https://sitepoint.com/#hash". Then, the selector $("h2:target") will select the element <h2 id="hash">.

• :animated Selector — This selector returns all elements that have an animation in progress when the selector is run. This implies that any element whose animation starts after the selector has been executed, won't be returned. Also, keep in mind that if you are using a custom jQuery build without the effects module, this selector will throw an error. In this demo only the animated box turns orange because of the selector.

Index-based selectors

Besides the basic selectors we discussed above, you can also select elements on the basis of their index. jQuery provides its own set of index-based selectors which use zero-based indexing. This means that to select the third element you will have to use the index 2.

Here is a list of all index based selectors:

• :eq(n) Selector — This selector will return the element at index n. From version 1.8 onward, it accepts both positive and negative index value. When a negative value is supplied counting occurs backward from the last element.
• :lt(n) Selector — This selector will return all elements with index less than n. It also accepts both positive and negative values from version 1.8 onward. Just like the :eq(n) selector, when a negative value is provided counting occurs backward from the last element.
• :gt(n) Selector — This selector is just like :lt(n). The only difference is that it returns all elements with an index greater than or equal to n.
• :first Selector — This will return the first matched DOM element on a webpage. It is equivalent to :eq(0) and :lt(1). One difference between :first and :first-child selector is that :first-child can select multiple elements each of which is first child of their parent.
• :last Selector — This one is similar to the :first selector but returns the last child instead.
• :even Selector — This will return all elements with an even index. Since indexing in jQuery is zero-based, the selectors selects first child, third child and so on. This seems counter-intuitive but that's how it works.
• :odd Selector — This one works like the :even selector but returns elements with odd indexes.

In the following example, you can click on the three buttons :lt, :gt and :eq and they will randomly generate an index and apply the resulting selector to a list:

See the Pen Index-based Selectors by SitePoint (@SitePoint) on CodePen.

As you can see, using :first and :last only selects the respective first and last elements on the webpage and not within every parent.

Child selectors

jQuery enables you to select the children of an element based on their index or type. The CSS child selectors are different from jQuery ones in the sense that they don't use zero-based indexing.

Here is a list of all child selectors:

• :first-child — This selector returns all elements which are the first child of their parent.

• :first-of-type — This one selects all elements which are the first sibling of their own kind among many others.

• :last-child — This will select the last child of a parent. Just like :first-child, it can select multiple elements in case of many parents.

• :last-of-type — It selects all children that are the last of their type in a parent. In case of multiple parents, it can select multiple elements.

• :nth-child() — This one is a bit complex. It can accept a variety of values as parameter like a number greater than or equal to 1, the strings even and odd or an equation like 4n+1.

• :nth-last-child() — This selector is similar to the previous one and accepts the same parameters. The only difference is that it begins its counting from the last child.

• :nth-of-type() — This selector returns all elements that are the nth child of their parent with respect to their siblings with same name.

• :nth-last-of-type() — This selector functions just like the :nth-of-type() selector but the counting begins from the end.

Continue reading %A Comprehensive Look at jQuery Selectors%

Flux (rss): http://feeds.feedburner.com/Jquery4u?format=xml