validin

elegant form validation

Validin tries to take the headache out of form validation by making things simple and keeping your markup clean. Dependencies: Just jQuery.

Installation & Usage

First, link to jQuery and validin in your HTML:

<!-- validin styles: -->
<link rel="Stylesheet" href="validin.css" type="text/css" />
<!-- jQuery: -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- validin scripts: -->
<script src="validin.js"></script>

Then activate it on your forms:

// You can enable validin on all forms in your page:
$(window).validin();

// Or just a specific form:
$('.form1').validin();

Lastly, add 'validate' attributes to all of the input fields that need validation:

<input validate="number">

Examples

Try testing valid and invalid values in each of the forms to see how validin reacts to user input.

Letters Only

Letters and Numbers

Letters and Spaces

Letters, Dashes and Underscores

Letters, Numbers, Dashes and Underscores

Whole Numbers

Numbers (Decimals Allowed)

Name Characters Only

Name charactes assumes all letters, dashes, apostrophes and periods

Email

URL

Phone

Zip Code (US)

Credit Card

Regular Expressions

Valid values for the above regular expression follow this pattern:
up to three numbers or letters, then a dash, and then any whole number

Minimum Value (Assumes Number)

Maximum Value (Assumes Number)

Minimum Value Length

Maximum Value Length

Matching Fields

These two fields need to match:

Required

Making a field required can be done using the 'required' attribute as below (which conforms to web and accessibility standards) or using the 'required' validation setting (eg. "validate='required'").

Multiple Validations

You can apply more than one validation per field by separating each requirement with the "|" character.

Different Input Types

These validations will work with just about any input type, including...

Ranges

Value: 50

Selects
Checkboxes
Textareas

Options

Validin comes pretty much perfect right out of the box, but there are some ways to customize it's behavior. You can add options to the validin() function like so:

options = {
  feedback_delay: 1000,
  invalid_input_class: "bad_input"
};

$(window).validin(options);

Here are the available settings and their defaults:

feedback_delay: 700, // Number of ms after input before testing validity
invalid_input_class: "invalid", // Class name added to invalid inputs
error_message_class: "validation_error", // Class name added to forms with validation errors
form_error_message: "Please fix any errors in the form", // The message that appears at the bottom of a form if there are any errors present
required_fields_initial_error_message: "Please fill in all required fields", // Initial message showing why form is disabled if there are required fields but no errors
required_field_error_message: "This field is required", // Message shown next to required fields that are not filled in AFTER field has lost focus
custom_tests: [] // Array of custom validation tests (see below)

Adding Custom Validation Tests

There are a bunch of validation tests already built into validin, but you can make your own with the 'tests' option. Custom validation tests follow this syntax:

'validation_name': {
  'regex': [RegEx], // Regular expression to test if input is valid
  'error_message': [string] // The message shown if field is invalid
}

For example, you might put this in your validin options to test an input field for two-letter values, such as you'd find in US state abbreviations:

custom_tests: {
  'state_abbreviation': {
    'regex': /[A-Z]{2}/,
    'error_message': "States are abbreviated with two capital letters"
  }
}

The above code would allow you to use that test on a field like so: