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. Note: Forms will be valid even with empty inputs if the field isn't set to 'required'.

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 characters assumes all letters, dashes, apostrophes and periods

Email

URL

Phone

Zip Code (US)

Credit Card

Secure Password

Passwords must contain at least one letter, one number and one special character be at least 8 character long

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

Javascript Function

// is_sam() function will show valid if field valie is 'Sam', and invalid for anything else
is_sam = function(field_value) {
   if(field_value == 'Sam') return true
   else return "That's not 'Sam'"
}

Valid value for the above field: Sam

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.

Other Input Types

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

Ranges

Value: 50

Selects

Checkboxes

Radio Buttons

Textareas

Files

Functions

Below are a number of javascript functions to give you more control over how your forms are validated and operate.

getValue()

Similar to jQuery's val() function, it will return the value of an input, but also returns true/false for checkboxes and the correct value whichever radio button is selected in a set.

vnGetValue($input)
or, with jQuery:
$input.getValue()
Arguments:
$input*(jQuery object) jQuery object for the desired input field

addError()

Attach an error message to an input field and disable form without using a validation test. This is useful for instances where a value is programmatically controlled or needs to be validated elsewhere (e.g. server-side).

Note: more than one error can be attached to an input via the addError() function, but only one will be shown at a time.

Note: the field will show and error and the form disabled until the error is removed.

vnAddError($input, error_id, error_message)
or, with jQuery:
$input.addError(error_id, error_message)
Arguments:
$input*(jQuery object) jQuery object for the desired input field
error_id*(string) Unique identifier for error to be selectable by removeError()
(may only be letters, numbers, hyphens, and underscores)
error_message*(string) error message to be displayed on input

removeError()

Remove an error from an element that was created via addError()

Note: the field may still show errors if other validations are unsatisfied

vnRemoveError($input, error_id)
or, with jQuery:
$input.removeError(error_id)
Arguments:
$input*(jQuery object) jQuery object for the desired input field
error_id*(string) Unique identifier for error created previously by addError()

validateInput()

Returns whether or not a valid is valid. If invalid, it will also display an error message and disable the form

vnValidateInput($input, run_immediately)
or, with jQuery:
$input.validateInput(run_immediately)
Arguments:
$input*(jQuery object) jQuery object for the desired input field
run_immediately(boolean) Whether or not to check if input is valid immediately, rather than wait for the default delay

isFormValid()

Returns whether or not (true/false) the given form has any errors

vnIsFormValid($form)
or, with jQuery:
$input.isFormValid()
Arguments:
$form*(jQuery object) jQuery object for the desired form field

attachMessage()

Attach an message to an input element. This will not create an error or disable the form.

Note: Message will be cleared the next time the validation is checked on the element

vnAttachMessage($input, message)
or, with jQuery:
$input.attachMessage(message)
Arguments:
$input*(jQuery object) jQuery object for the desired input field
message*(string) error message to be displayed on input

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: