How to make use of it:

1. To use this plugin, you first have to load the JavaScript file ‘validin.js’ after you’ve got loaded the jQuery library:

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

2. Call the function on the target type aspect and the jQuery Validin is prepared to be used.

$('form').validin();

3. Add the validate="Rule Name" attribute to the form fields as these:

<form>
  <input required>
  <input validate="alpha">
  <input validate="alpha_num">
  <input validate="alpha_space">
  <input validate="alpha_dash">
  <input validate="alpha_num_dash">
  <input validate="number">
  <input validate="decimal">
  <input validate="name">
  <input validate="email">
  <input validate="url">
  <input validate="phone">
  <input validate="zip">
  <input validate="creditcard">
  <input validate="min:5">
  <input validate="max:5">
  <input validate="min_length:5">
  <input validate="max_length:5">
  <input class="must_match">
  <input validate="match:.must_match">
  <input type="submit">
</form>

3. You also can define your personal validation guidelines utilizing regex.

<input validate="regex:/[0-9a-z]{1,3}-\d*/i">

4. Style the error message and form fields when invalid.

input.invalid { border-color: #ff7a7a; }

.validation_error {
  margin: .4em 0 1em;
  color: #ff7a7a;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .15em;
}

5. Customize the default validation guidelines and error messages.

$('form').validin({
  validation_tests: {
    'alpha': {
      'regex': /[a-zA-Z]*/,
      'error_message': "This can only contain only letters"
    },
    'alpha_num': {
      'regex':  /[A-Z0-9]*/i,
      'error_message': "This can only contain letters and numbers"
    },
    'alpha_space': {
      'regex': /[A-Z ]*/i,
      'error_message': "This can only contain letters"
    },
    'alpha_dash': {
      'regex': /[A-Z\.\-_]*/i,
      'error_message': "This can only contain letters, underscores and hyphens"
    },
    'alpha_num_dash': {
      'regex': /[A-Z0-9\.\-_]*/i,
      'error_message': "This can only contain letters, numbers, underscores and hyphens"
    },
    'number': {
      'regex': /[\d]*/,
      'error_message': "This needs to be a valid whole number"
    },
    'decimal': {
      'regex': /(\d*\.?\d*)/,
      'error_message': "This needs to be a valid number"
    },
    'name': {
      'regex': /[A-Z\.\-'\s]*/i,
      'error_message': "This needs to be a valid name"
    },
    'email': {
      'regex': /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/i,
      'error_message': "This needs to be a valid email address"
    },
    'url': {
      'regex': /(https?|ftp):\/\/[^\s\/$.?#].[^\s]*/i,
      'error_message': "This needs to be a valid URL"
    },
    'phone': {
      'regex': /(?=.*?\d{3}( |-|.)?\d{4})((?:\+?(?:1)(?:\1|\s*?))?(?:(?:\d{3}\s*?)|(?:\((?:\d{3})\)\s*?))\1?(?:\d{3})\1?(?:\d{4})(?:\s*?(?:#|(?:ext\.?))(?:\d{1,5}))?)\b/i,
      'error_message': "This needs to be a valid phone number"
    },
    'zip': {
      'regex': /\d{5}(?:-?\d{4})?/i,
      'error_message': "This needs to be a valid zip code"
    },
    'creditcard': {
      'regex': /(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})/i,
      'error_message': "This needs to be a valid credit card number"
    },
    'regex': {
      'regex': /.*/i,
      'error_message': "This is not a valid value"
    },
    'min': {
      'regex': /.*/i,
      'error_message': "This number needs to be at least %i"
    },
    'max': {
      'regex': /.*/i,
      'error_message': "This number needs to no more than %i"
    },
    'min_length': {
      'regex': /.*/i,
      'error_message': "This needs to be at least %i characters long"
    },
    'max_length': {
      'regex': /.*/i,
      'error_message': "This needs to be no more than %i characters long"
    },
    'match': {
      'regex': /.*/i,
      'error_message': "These values have to match"
    }
  },
});

6. More configuration choices with default values.

$('form').validin({

  // delay time in milliseconds
  feedback_delay: 700,

  // default CSS classes
  invalid_input_class: 'invalid',
  error_message_class: "validation_error",

  // default error messages
  form_error_message: "Please fix any errors in the form",
  required_fields_initial_error_message: "Please fill in all required fields",
  required_field_error_message: "This field is required",

  // adjust margins on the validation error messages
  override_input_margins: true,

  // additional validate rules
  tests: {},

  // callback
  onValidateInput: function() {}
  
});

Minimal Form Field Validation Plugin, validin Github, jquery validation in php registration form, jquery validation file

See Demo And Download