Form Validation Plugin For Bootstrap 4 – Vindicate

File Size:12.52 KB
Views Total:3,857
Last Update:January 5, 2018
Publish Date:December 2, 2017
Official Website:Go to website
License:MIT

jQuery plugin for validation in bootstrap 4  that uses Bootstrap form input fields create validations. This plugin is  extendable and fully customizable jQuery plugin.That provides visual feedback as the users are typing something wrong or empty fields in the form show alert in form.

How to use it:

1. Add to CSS/js Path: 

<link href="assets/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="assets/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="assets/js/vindicate.js"></script>

2.  Use Default plugin settings:

$("form").vindicate({

  // if true, do not submit form even if validation is correct
  soft: true,

  // if true, validate on element blur
  activeForm: false,

  // shows success messages
  showSuccess: true,

  // URL, if present, converts data to a request and posts to URL provided
  submitTo: "",

  // message to show for required fields
  requiredMessage: "This is a required field.",

  // parent container
  parent: "form-group",

  // CSS helper
  helper: "form-control-feedback",

  // custom styles based on the states
  validationStates: {
    valid: {
      parent: "has-success",
      input: "form-control-success"
    },
    warning: {
      icon: "has-warning",
      color: "form-control-warning"
    },
    invalid: {
      icon:"has-danger",
      color:"form-control-danger"
    }
  },

  // custom validation rules
  formats: {
    alpha: {
      regex: /^[a-zA-Z0-9]+/,
      message: "This field only accepts alphabetic characters. (a-z)"
    },
    alphanumeric: {
      regex: /^[a-zA-Z0-9]+/,
      message: "This field does not accept any special characters. (a-z, 0-9)"
    },
    creditcard: {
      regex: /^d{16}/,
      message: "Please enter a valid credit card number."
    },
    date: {
      regex: /([0-9]{4}.[0-9]{1,2}.[0-9]{1,2})|([0-9]{1,2}.[0-9]{1,2}.[0-9]{4})/,
      message: "Please enter a valid date. (YYYY-MM-DD)",
    },
    decimal: {
      regex: /^\d+$/,
      message: "Please enter a decimal value (xxx.xx)"
    },
    email: {
      regex: /^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/,
      message: "Please enter a valid email address. ([email protected])"
    },
    numeric: {
      regex: /^\d+$/,
      message: "This field only accepts numbers. (0-9)"
    },
    phone: {
      regex: /^([0-9]{3}[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4})/,
      message: "Please enter a 10 digit phone number. (xxx-xxx-xxxx)"
    },
    time: {
      regex: /[0-9]{1,2}(\:[0-9]{0,2})?/,
      message: "Please enter a valid time (xx:xx)"
    },
    url: {
      regex: /^\d+$/,
      message: "Please enter a valid url. (www.website.com/example)"
    }
  }
});

Done 🙂