Validates the selected form.This method adds, by default, a submit-event-handler to the form and keyup and blur handlers to each element within the form. Validation rules can be specified via the rules-option or via metadata (requires metadata plugin). Messages can be left out (there is a default message for each method), specified via the messages-option or via the title-attribute on each element. A set of key/value pairs that configure the validate. All options are optional.Use this class to create error labels, to look for existing error labels and to add it to invalid elements.Wrap error labels with the specified element.If true, the form is not submitted and certain errors are display on the console (requires [http://getfirebug.com Firebug or Firebug lite]).Callback for handling the actual submit when the form is valid. Gets the form as the only argmument. Replaces the default submit.Key/value pairs defining custom rules. Key is the ID or name (for radio/checkbox inputs) of an element, value is an object consisting of rule/parameter pairs, eg. {required: true, min: 3}. Once specified, metadata rules are completely ignored.Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element. Instead of a plain message another map with specific messages for each rule can be used. Can be specified for one or more elements. Overrides the title attribute of an element. Each message can be a String or a Function. The Function is called with the element as the first and the validator as the second argument and must return a String to display as the message for that element.Validate the form on submit. Set to false to use only other events for validation (option event).Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event.Validate checkboxes and radio buttons on click.In case you use metadata for other plugins, too, you want to wrap your validation rules into their own object that can be specified via this option.Hide and show this container when validating.Hide and show this container when validating.A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().Used to customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".Focus the last active or first invalid element on submit via validator.focusInvalid().If enabled, removes the errorClass from the invalid elements and hides all errors messages whenever the element is focused. Avoid combination with focusInvalid.Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.Called to determine if a subform is required. An input is passed as the argument, and a boolean is expected to return: If it returns false, the input is part of an optional subform, therefore not required.Validates the selected form or elements.validate()]]> needs to be called on the form before checking it using this method. Shortcut for the validator API.Sets up validation for a form, then checks if the form is valid.$("#myform").validate(); // this could be called after some user interaction $("#myform").valid():blankMatches elements with a blank valueBlank means either no value at all or only whitespace. The implementation does a check like this: jQuery.trim(value).length == 0Finds input elements with no value or just whitespace.<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>$("input:blank").css("background-color", "#bbbbff");<input value=""/><input value=" "/><input value="abc"/>:filledMatches elements with a value.filled means any value, but not only whitespace. The implementation does a check like this: jQuery.trim(value).length > 0Finds input elements with no value or just whitespace.<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>$("input:filled").css("background-color", "#bbbbff");<input value=""/><input value=" "/><input value="abc"/>:unchecked1.0Matches all elements that are unchecked.Inversion of :checked]]>.Finds all input elements that are unchecked.<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> function countUnchecked() { var n = $("input:unchecked").length; $("div").text(n + (n == 1 ? " is" : " are") + " unchecked!"); } countUnchecked(); $(":checkbox").click(countUnchecked); div { color:red; } <form> <input type="checkbox" name="newsletter" checked="checked" value="Hourly" /> <input type="checkbox" name="newsletter" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> <input type="checkbox" name="newsletter" value="Yearly" /> </form> <div></div>[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]Validates the form, returns true if it is valid, false otherwise.This behaves as a normal submit event, but returns the result.Triggers form validation programmatically.$("#myform").validate().form()Validates a single element, returns true if it is valid, false otherwise.This behaves as validation on blur or keyup, but returns the result.An element to validate, must be inside the validated form.Triggers element validation programmatically.$("#myform").validate().element( "#myselect" );Call to refresh a form after new elements have been added or rules changed.Accepts an optional argument to refresh only a part of the form, eg. only the newly added element.Refresh only the given elements, instead of the entire formRefrehes the validator after the form has changed.var validator = $("#myform").validate(); validator.refresh();Refreshes the validator after a new element has been added.var validator = $("#myform").validate(); validator.refresh( "#newElement" );Resets the controlled form.Resets input fields to their original value (requires form plugin), removes classes indicating invalid elements and hides error messages.Reset the form controlled by this validator.var validator = $("#myform").validate(); validator.resetForm();Show the specified messages.Keys have to refer to the names of elements, values are displayed for those elements, using the configured error placement.One or more key/value pairs of input names and messages.Adds and shows error message programmatically.var validator = $("#myform").validate(); validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});Modify default settings for validation.Accepts everything that Plugins/Validation/validate]]> accepts.Options to set as default.Sets the debug setting for all validation calls.jQuery.validator.setDefaults({ debug: true );Add a new validation method. It must consist of a name (must be a legal javascript identifier), a function and a default message.Please note: While the temptation is great to add a regex method that checks it's paramter against the value, it is much cleaner to encapsulate those regular expressions inside their own method. If you need lots of slightly different expressions, try to extract a common parameter. A library of regular expressions: http://regexlib.com/DisplayPatterns.aspxThe name of the method, used to identify and referencing it, must be a valid javascript identifierThe actual method implementation, returning true if an element is validThe default message to display for this method. Can be a function created by String.format(value).Add a validation method that checks if a value starts with a certain domain.jQuery.validator.addMethod("domain", function(value) { return this.optional(element) || /^http://mycorporatedomain.com/.test(value); }, "Please specify the correct domain for your documents");Adds a validation method that checks if a given value equals the addition of the two parameters.jQuery.validator.addMethod("math", function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; }, String.format("Please enter the correct value for {0} + {1}"));Makes the element always required.Return false if the element is empty (text input) or unchecked (radio/checkbxo) or nothing selected (select). Works with text inputs, selects, checkboxes and radio buttons. To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" always required. Nothing and blanks are invalid.$("#myform").validate({ rules: { field: "required" } });70#fruit { margin-left: .5em; float: left; } #fruit, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input, select { border: 1px solid black; margin-bottom: .5em; } select.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="fruit">Please select a fruit</label> <select id="fruit" name="fruit" title="Please select something!" <option value=""></option> <option value="1">Banana</option> <option value="2">Apple</option> <option value="3">Peach</option> </select> <br/> <input type="submit" value="Validate!" /> </form> Makes the fruit select required.$("#myform").validate({ rules: { fruit: "required" } });70label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } label.error { display:none; background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="gender_male"> <input type="radio" id="gender_male" value="m" name="gender" /> Male </label> <label for="gender_female"> <input type="radio" id="gender_female" value="f" name="gender"/> Female </label> <label for="gender" class="error">Please select your gender</label> <br/> <input type="submit" value="Validate!" /> </form> Makes the gender radio buttons required.$("#myform").validate({ rules: { gender: "required" } });70#agree { margin-left: .5em; float: left; } #agree, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="agree">Please agree to our policy</label> <input type="checkbox" id="agree" title="Please agree to our policy!" name="agree" /> <br/> <input type="submit" value="Validate!" /> </form> Makes the agree checkbox required.$("#myform").validate({ rules: { agree: "required" } });Makes the element required, depending on the result of the given expression.Return false if the element is empty (text input) or unchecked (radio/checkbxo) or nothing selected (select). Works with all kind of text inputs, selects, checkboxes and radio buttons. To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>An expression (String) is evaluated in the context of the element's form, making the field required only if the expression returns more then one element.Makes "newsletter-type" required only if "newsletter" is checked.$("#myform").validate({ rules: { "newsletter-type": { required: "#newletter:checked" } } });Makes the element required, depending on the result of the given callback.Return false if the element is empty (text input) or unchecked (radio/checkbxo) or nothing selected (select). Works with all kind of text inputs, selects, checkboxes and radio buttons. To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>The function is executed with the element as it's only argument: If it returns true, the element is required.Makes "parent" required only if age is below 13.$("#myform").validate({ rules: { parent: { required: function(element) { return $("#age").val() < 13; } } } });Makes the element require a given minimum length.Return false, if the element is * some kind of text input and its value is too short * a set of checkboxes has not enough boxes checked * a select and has not enough options selected Works with text inputs, selects and checkboxes.Minimum number of characters required70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, Minimum length 3: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required having at least 3 characters.$("#myform").validate({ rules: { field: { required: true, minLength: 3 } } });Makes the element require a given maxmimum length.Return false, if the element is * some kind of text input and its value is too long * a set of checkboxes has too many boxes checked * a select and has too many options selected Works with text inputs, selects and checkboxes.Maximum number of characters required 70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, maximum length 4: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required having at most 4 characters.$("#myform").validate({ rules: { field: { required: true, maxLength: 4 } } });Makes the element require a given value range.Return false, if the element is * some kind of text input and its length is too short or too long * a set of checkboxes has not enough or too many boxes checked * a select and has not enough or too many options selected Works with text inputs.Value range required70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, minium length 2, maximum length 6: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and between 2 and 6 characters long.$("#myform").validate({ rules: { field: { required: true, rangeLength: [2, 6] } } });Makes the element require a given minimum value.Works with text inputs.Minimum value required70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, minimum value 13: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and 13 or larger.$("#myform").validate({ rules: { field: { required: true, minValue: 13 } } });Makes the element require a given maximum value.Works with text inputs.Maximum value required70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, maximum value 23: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and 23 or smaller.$("#myform").validate({ rules: { field: { required: true, maxValue: 23 } } });Makes the element require a given value range.Works with text inputs.Value range required70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, minium 13, maximum 23: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and between 13 and 23.$("#myform").validate({ rules: { field: { required: true, rangeValue: [13, 23] } } });Makes the element require a valid emailReturn true, if the value is a valid email address. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, email: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and an email address.$("#myform").validate({ rules: { field: { required: true, email: true } } });Makes the element require a valid urlReturn true, if the value is a valid url. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, URL: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and a url.$("#myform").validate({ rules: { field: { required: true, url: true } } });Makes the element require a date. Return true, if the value is a valid date. Uses JavaScripts built-in Date to test if the date is valid, and is therefore very limited. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, date: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and a date.$("#myform").validate({ rules: { field: { required: true, date: true } } });Makes the element require a ISO date. Return true, if the value is a valid date, according to ISO date standard. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, dateISO: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and a ISO date.$("#myform").validate({ rules: { field: { required: true, dateISO: true } } });Makes the element require a german date. Return true, if the value is a valid date. Supports german dates (29.04.1994 or 1.1.2006). Doesn't make any sanity checks. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, date: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and a german date.$("#myform").validate({ rules: { field: { required: true, dateDE: true } } });Makes the element require digits only. Returns true if the value contains only digits. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, digits: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and digits only.$("#myform").validate({ rules: { field: { required: true, digits: true } } });Makes the element require a creditcard number. Return true, if the value is a valid creditcard number. Works with text inputs.70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, creditcard: </label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and a creditcard number.$("#myform").validate({ rules: { field: { required: true, creditcard: true } } });Makes the element require a certain file extension.Returns true if the value ends with one of the specified file extensions. If nothing is specified, only images are allowed (png, jpeg, gif). Works with text inputs.The allowed file extensions, seperated via "|", defaults to "png|jpe?g|gif"70#field { margin-left: .5em; float: left; } #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } br { clear: both; } input { border: 1px solid black; margin-bottom: .5em; } input.error { border: 1px solid red; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="field">Required, only .xls and .csv files allowed</label> <input class="left" id="field" name="field" /> <br/> <input type="submit" value="Validate!" /> </form> Makes "field" required and ending with ".xls" or ".csv".$("#myform").validate({ rules: { field: { required: true, accept: "xls|csv" } } });Requires the element to be the same as another oneReturns true if the value has the same value as the element specified by the first parameter. Works with text inputs.The selector for the element to compare the current values130 #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } label { width: 10em; } br { clear: both; } input { margin-left: .5em; float: left; border: 1px solid black; margin-bottom: .5em; } input.submit { float: none; } input.error { border: 1px solid red; width: auto; } label.error { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; } label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; display: block; width: 16px; height: 16px; } <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <script type="text/javascript"> jQuery.validator.setDefaults({ debug: true, success: "valid" });; </script> <form id="myform"> <label for="password">Password</label> <input id="password" name="password" /> <br/> <label for="password_again">Again</label> <input class="left" id="password_again" name="password_again" /> <br/> <input class="submit" type="submit" value="Validate!" /> </form> Makes "field" required to be the same as #other$("#myform").validate({ rules: { password: "required", "password_again": { equalTo: "#password" } } });