Advanced jQuery Form validation (5): how to limit the value of an input field to another's

In this example, we will limit the maximal value entered in an input field according to the one entered in another one.
The form has two input fields:

• The first field is limited between 0 and 100 (limitation defined in the rule range: [0, 100])
• The second one is limited between 0 and the value entered in the first field.

Advanced jQuery Form validation (4): Display error message for grouped fields

After having discovered conditional triggers and learnt more about where to display error messages, we are going to display an error message for a group of fields.

In that example, two fields are related and at least one of them is required. In other words, each of those two fields is required if the other is empty. These two fields can be of any type, but we'll focus here on an input text and a textarea. Of course, we could have used a radio button to indicate that specific behavior, but we would like to keep it simple on the interface and limit the number of form elements.

Check a chromosome region with jQuery validator

A chromosome region is the part of a chromosome defined either by anatomical details, especially by banding, or by its linkage groups, and divided in bands and subbands. In other words, these regions have been defined to talk about the location of a gene. The regions p and q are respectivelly used for the short arm and the long arm of the chromosome.

Here are some examples of chromosomal regions: 13q14, 1p12, 1p12.3

1p12.3 means on the short arm (p) of the chromosome 1, region 1, band 2, subband 3.

Advanced jQuery Form validation (3): Add conditional requirement rule for a set of checkboxes

The third article of that series about advanced jQuery Form validation deals with conditional triggers. In that particular case, we have a conditional trigger displayed as a radio button that makes a set of checkboxes required when activated, and optional when not activated.

All the checkboxes share the same name checkBoxesName[]. Note the square brackets, as we handle them with PHP on the server side, and the grouping has to be done this way.

To apply a validation rule to the set of checkboxes, the square brackets have to be used, hence the simple quotes used to delimitate their name in form validator set of rules.

Advanced jQuery Form validation (2): Validate a date

After checking a phone number against its international format, we will now check if a date entered as a string is valid.

We can of course use a date picker such as jQueryUI Datepicker to ease the user experience and with a nicer look and feel, but the aim of this example is to show you some advanced jQuery Form validation so we will use a very simple example. As a matter of fact, even with the aformentioned date picker, this control is still useful as your users can enter the date manually in your text input field.

Advanced jQuery Form validation (1): check a phone number format

The jQuery Validation plugin is a very powerful plugin aimed at form validation.

Among its main features, you can create your own validating methods. In that example, we will check a French phone number against the international format.

French phone numbers are made of ten digits, starting with 0 (zero), grouped by two and usually separated by dots or spaces (e.g.: 01 23 45 67 89). In the international format, the country code for France (33) prefixes the actual phone number, and the first digit is set between parenthesis. For a better readability, we use the space character as separator (e.g.: 33 (0)1 23 45 67 89).