Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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">
    
  • function - javascript function name. Function argument is field value. return truthy for valid, falsey for invalid

      <input validate="function:function_name">
    
  • 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);
		}
	});

About

A clean and easy form validator for jQuery

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published