Skip to content
A clean and easy form validator for jQuery
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
_config.yml
example.html
validin.css
validin.js
validin.min.js
validin_logo.svg

README.md

validin

An simple and elegant form validator for jQuery

Demo

Usage

  1. First, make sure you link to a version of jQuery and validin JS in your HTML (validin CSS optional).

  2. Next, apply validin to a form in your scripts like so:

     $('.form1').validin(options);
    

    Or to every form on a page:

     $(document).validin(options);
    
  3. Lastly, add a validate attribute on the input or add required to tell validin to test that field.

    Examples:
     <input name="email" validate="email">
    
     <input name="address" required>
    

Validations

  • alpha - letters only

  • alpha_num - letters and numbers

  • alpha_space - letters and white space

  • alpha_dash - letters, hyphens, and underscores

  • alpha_num_dash - letters, numbers, hyphens and underscores

  • number - whole numbers only

  • decimal - any number, including decimals

  • name - letters, spaces, and common naming punctuation such as hyphens, periods, apostrophes, etc.

  • email

  • url

  • phone - including commong punctuation marks and formats

  • zip - including both 5 digit and 5+4 formats

  • creditcard - checks for basic credit card rules

  • regex - javascript style regular expression

      <input validate="regex:/[0-9a-z]{1,3}-\d/i">
    
  • min - number, no smaller than the value given

      <input validate="min:5">
    
  • max - number, no larger than the value given

      <input validate="max:5">
    
  • min_length - any text, no shorter in length than the value given

      <input validate="min_length:5">
    
  • max_length - any text, no longer in length than the value given)

      <input validate="max_length:5">
    
  • match - Requires that the value of this input matches the element given (any CSS selector will work)

      <input validate="match:.other_input">
    

Options

  • feedback_delay - The number of milliseconds before showing a validation error (default: 1500)

  • invalid_input_class - The class name to apply to invalid inputs (default: 'invalid')

  • error_message_class - The class name to apply to the validation error message elements (default: "validation_error")

  • form_error_message - The message that appears at the bottom of a form if there are any errors present (default: "Please fix any errors in the form")

  • required_fields_initial_error_message - Initial message showing why form is disabled if there are required fields but no errors (default: "Please fill in all required fields")

  • required_field_error_message - Message shown next to required fields that are not filled in AFTER field has lost focus (default: "This field is required")

  • override_input_margins - Setting to true will automatically adjust margins on the validation error message elements to position message close to input (default: true)

  • custom_tests - A javascript object that follows this pattern. Any test on this object will be added to the list of included tests listed above. (default: {})

      'validation_test_name': {
      	'regex': /.*/i,
      	'error_message': "These values have to match"
      }
    
  • onValidateInput: A callback function that will be run every time a validation test is executed (default: function(validation_info) {})

    NOTE: validation_info contains an object with three values: input (the DOM element of the currently tested input), has_error (boolean), and error_message (string containing the error message of the current input, if any)

Adding custom settings might look something like this:

	$('form').validin({
		feedback_delay: 1200,
		override_input_margins: false,
		tests: {
			'state_abbreviation': {
				'regex': /[a-z]{2}/i,
				'error_message': "State abbreviations are two letters long (eg. OR)"
			}
		},
		onValidateInput: function(validation_info) {
			console.log(validation_info.input);
			console.log(validation_info.has_error);
			console.log(validation_info.error_message);
		}
	});
You can’t perform that action at this time.