Question

Today is my first attempt at using the jQuery Validation plugin. My form is for validating GPS coordinates.

Here are my rules and messages:

$(document).ready(function() {
    // validate form when called
    var validator =$("#box-registration").validate({
        rules: {
            latitude: {
                min: 0,
                max: 90,
                number: true
                },

            longitude {
                min: 0,
                max: 180,
                number: true
                },

            geo_dms {
                min: 0,
                max: 59,
                number: true
                }
            },
        messages: {
            latitude: "Latitude must be between 0 and 90",
            longitude: "Longitude must be between 0 and 180",
            geo_dms: "Degree minutes and seconds must be between 0 and 59"
            }
        });
    });

Here is part of the form I am trying to validate. I am trying to apply validation to the elements “geo-lat-dd” and “geo-lon-dd”:

        <div id="geo-format-dd">
            <dl>
            <dt><label class="labelstandard">Latitude</label></dt>
            **<dd><input  id="geo-lat-dd" name="geo-lat-dd" type="text" class="latitude textinput100 nonewrow"/></dd>**
            <dd class="nonewrow">
                <input type="radio" name="latDD" id="latDDN" checked="checked" value="N" class="nonewrow" /><label class="nonewrow" for="latDDN">N</label>
                <input type="radio" name="latDD" id="latDDS" value="S" class="nonewrow" /><label class="nonewrow" for="latDDS">S</label>
            </dd>
            </dl>

            <dl class="newrow">
            <dt><label class="labelstandard">Longitude</label></dt>
            **<dd><input id="geo-lon-dd" name="geo-lon-dd" type="text" class="longitude textinput100 nonewrow" /></dd>**
            <dd class="nonewrow">
                <input type="radio" name="lonDD" id="latDDW" checked="checked" value="W" class="nonewrow" /><label class="nonewrow" for="lonDDW">W</label>
            </dd>
            </dl>
        </div>

The two elements have classes “latitude” and “longitude” applied, and my Validation plugin rules include those classes (there are also fields for degrees-minutes-seconds so I’m trying to re-use the classes instead of using IDs).

No error messages appear when I validate the form with values like 9999 in the fields. Using Firebug, I have stepped through and confirmed the validation code is running, but it returns no exceptions.

In the rules, I have also tried putting a dot in front of the selectors, which crashed the page, and also enclosing it in quotes with a period, like “.latitude”

Can someone please point me in the right direction to figure out what I’m doing wrong?

Answer 1

There are a few issues:

1. You are calling validate on the selector #box-registration which doesn’t exist in your sample markup.
2. Your rules options should be keyed on the form element names. The documentation isn’t clear on this; they seem to imply that the rules can automatically match base on class names, but I don’t think that can be done in the way you are attempting.
3. Your JavaScript has some syntax errors. Specifically, you’re missing colons in the rules object.

I’ve created this Fiddle to show validation working with these corrections.