Flexible Full-featued Form Validation Plugin - jQuery Validaty

Validaty is a simple, flexible jQuery form validation plugin which applies most commonly used validators to your existing form fields using HTML5 data attributes.

Key features:

• Balloon or list style message to show the erros
• Bind via form
• Helper methods inside the plugin
• Highlight for valid and invalid fields
• Option to choose which field will be focused when validation fails
• Support to declare the trigger of the validation inline with 'on:' key
• Method to call the validation on form;
• Method to destroy the Validaty's bind;
• Method to get the validators

Validators:

• Must contain
• Date ISO
• Digits
• E-mail
• Equal
• Max Check
• Max Length
• Max Select
• Min Check
• Min Length
• Min Select
• Number
• Range Length
• Range Number
• Required
• URL
• Username

How to use it:

1. Include jQuery library and the jQuery Validaty's core JavaScript file on your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="lib/jquery.validaty.js"></script>

2. The plugin comes with a couple of validation rules ready to be used and declared in the file jquery.validaty.validators.js.

<script src="lib/jquery.validaty.validators.js"></script>

3. Don't forget to include the core style sheet in the header of the html page.

<link rel="stylesheet" href="lib/jquery.validaty.css">

4. Add the 'data-validaty' attribute to your form fields to be validated.

<form>
  <input type="text" data-validaty="validator_name">
</form>

5. Attach the plugin to the form element and done.

$('form').validaty();

6. There are two different styles of how the message will be displayed, the default balloon and the list. The list style will be appended after the invalid field. If it is checkbox or radio with the same name, will be appended after the last one.

$('form').validaty({
  balloon: false
});

7. More options with default values.

$('form').validaty({

  // where you receive the field and message and decide what to do with that
  errorTarget: undefined,

  // Enables the fade on balloons message on mouseover and mouseout.
  fade:       true,

  // Animation speed
  fadeSpeed:  200,

  // Chooses if the first, the last or none of these field will be focused when validation fails. Options: null, 'first' or 'last'.
  focus:      'first',

  // Fields to be ignored during the validation.
  ignore:     ':submit, :reset, :image, :disabled',

  // Callback that runs when all fields are valid.
  onValid:    undefined,

  // Object to hold the injected validators functions from jquery.validaty.validators.js file.
  validators: {}
  
});

8. API.

// Gives you the internal helpers.
$('form').validaty('helper');

// Gives you a validator.
$('form').validaty('validator');

// Checks if all fields is valid.
$('form').validaty('valid');

// Execute the validation over the form.
$('form').validaty('validate');

// Destroy the Validaty's bind and gives you the raw element before it.
$('form').validaty('destroy');

9. Helpers:

// Extract the field's parameters. range:1:9 on:blur will result { actions: [{ name: 'on', args: ['blur'] }], validations: [{ name: 'range', args: [1, 9] }]
helper.getParams(input);

// Checks if the given input is a checkbox or radio.
helper.isCheckable(input);

// Checks if the date is formatted as an ISO yyyy-MM-dd.
helper.isDateISO(value);

// Checks if the given value is a valid digit. It is just positive integer numbers.
helper.isDigits(value);

// Checks if the given value is a valid e-mail.
helper.isEmail(value);

// Checks if the given value is a number.
helper.isNumber(value);

// Checks if the given value is a valid URL.
helper.isUrl(input);

// Checks if the given value is a valid username text.
helper.isUsername(value);

Change log:

2017-07-08

• v0.5.2: Removes class valid and invalid before each validation to avoid invalid valid class.

2017-07-07

• Added callback options errorTarget where you receive the field and message and decide what to do with that.

---

This awesome jQuery plugin is developed by wbotelhos. For more Advanced Usages, please check the demo page or visit the official website.