jquery-validation

What is jquery-validation?

The jquery-validation npm package is a popular plugin for the jQuery library that provides a simple way to validate forms on the client side. It offers a wide range of validation rules and customization options to ensure that user input meets the required criteria before submission.

What are jquery-validation's main functionalities?

Basic Form Validation

This feature allows you to set up basic form validation rules. In this example, the field 'fieldName' is required and must be at least 2 characters long. Custom error messages are also provided.

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      fieldName: {
        required: true,
        minlength: 2
      }
    },
    messages: {
      fieldName: {
        required: "This field is required",
        minlength: "Your input must be at least 2 characters long"
      }
    }
  });
});

Custom Validation Methods

This feature allows you to define custom validation methods. In this example, a custom rule 'customRule' is created to ensure that the input contains only letters.

$.validator.addMethod("customRule", function(value, element) {
  return this.optional(element) || /^[a-zA-Z]+$/.test(value);
}, "Please enter only letters");

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      fieldName: {
        customRule: true
      }
    }
  });
});

Remote Validation

This feature allows you to perform remote validation by making an AJAX request to the server. In this example, the 'username' field is validated against a server endpoint to check if the username is already taken.

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true,
        remote: "/check-username"
      }
    },
    messages: {
      username: {
        required: "Please enter a username",
        remote: "Username is already taken"
      }
    }
  });
});

Other packages similar to jquery-validation

validate.js

Validate.js is a lightweight JavaScript form validation library inspired by the simplicity of jQuery's validation plugin. It provides a similar set of validation rules and customization options but does not depend on jQuery, making it suitable for projects that do not use jQuery.

parsleyjs

Parsley is a powerful, UX-focused form validation library. It offers a wide range of built-in validators and customization options, similar to jquery-validation. Parsley also provides better support for modern JavaScript frameworks and has a more user-friendly API.

formvalidation

FormValidation is a comprehensive form validation library that supports a wide range of frameworks, including Bootstrap, Foundation, and others. It offers more advanced features and customization options compared to jquery-validation, making it suitable for complex form validation requirements.

README

jQuery Validation Plugin - Form validation made easy

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

Getting Started

Downloading the prebuilt files

Prebuilt files can be downloaded from http://jqueryvalidation.org/

Downloading the latest changes

The unreleased development files can be obtained by:

1. Downloading or Forking this repository
2. Setup the build
3. Run grunt to create the built files in the "dist" directory

Including it on your page

Include jQuery and the plugin on a page. Then select a form to validate and call the validate method.

<form>
	<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("form").validate();
</script>

Alternatively include jQuery and the plugin via requirejs in your module.

define(["jquery", "jquery.validate"], function( $ ) {
	$("form").validate();
});

For more information on how to setup a rules and customizations, check the documentation.

Reporting issues and contributing code

See the Contributing Guidelines for details.

IMPORTANT NOTE ABOUT EMAIL VALIDATION. As of version 1.12.0 this plugin is using the same regular expression that the HTML5 specification suggests for browsers to use. We will follow their lead and use the same check. If you think the specification is wrong, please report the issue to them. If you have different requirements, consider using a custom method. In case you need to adjust the built-in validation regular expression patterns, please follow the documentation.

License

Copyright © Jörn Zaefferer
Licensed under the MIT license.