jQuery Plugin To Generate Fake Date In A Form - faker.js

jQuery Plugin To Generate Fake Date In A Form - faker.js
File Size: 48.9 KB
Views Total: 607
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

faker.js is an useful jQuery plugin created for web developers that allows to automatically generate random fake data in the form fields depending on the data type you specify.

How to use it:

1. Link to the latest version of jQuery library and the jQuery faker plugin's script:

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="scripts/faker.js"></script>

2. Add empty input fields with specified data types into the form as follows:

<form id="form" name="form">
  <input id="customer_fname" name="customer[username]" type="text">
  <input id="customer_mname" name="customer[mname]" type="text">
  <input id="customer_lname" name="customer[lname]" type="text">
  <input id="customer_email" name="customer[email]" type="text">
  <input id="customer_nick_name" name="customer[nick_name]" type="text">
  <input id="customer_city" name="customer[city]" type="text">
  <input id="customer_country" name="customer[country]" type="text">
  <input id="customer_address_1" name="customer[address_1]" type="text">
</form>

3. Initialize the plugin for auto generating.

$('#form').fakify();

4. Keep some input fields from auto generating.

$('#form').fakify({
  'except': ['mname', 'address_2', 'website']
});

5. Advanced usages.

$('#form').fakify({

  // maps address_1 field to street_address
  "customer[address_1]": "address.streetAddress", 

  // adds custom datatype along with the data
  "customer[nick_name]": ["Chaure", "Dalley", "Daure", "Bhyagute", "Gole"] 

  // restricts country data type to "Nepal" and "China" only
  "customer[country]": ["Nepal", "China"] 
  
});

6. Default plugin map table which maps the element names to the key for modularised usage for dictionary access and customization.

name: {
  fullName: ['fullname', 'full_name'],
  firstName: ['f_name', 'fname', 'first_name', 'firstname', 'fstname'],
  middleName: ['m_name', 'mname', 'middle_name', 'middlename'],
  lastName: ['l_name', 'lname', 'last_name', 'lastname', 'lstname']
},

address: {
  country: ['country'],
  state: ['state'],
  zip: ['zipcode', 'zip', 'postcode', 'postcode_by_state'],
  streetAddress: ['street_address', 'street', 'street_name', 'address'],
  stateAbbr: ['state_abbr'],
  city: ['city'],
  buildingNumber: ['building_number']
},

company: {
  name: ['company_name', 'c_name', 'organization_name', 'name'],
  website: ['url', 'website', 'web_address', 'web-address'],
  title: ['title'],
  description: ['description', 'desc'],
  department: ['department']
},

personal: {
  academic: ['academic', 'education', 'qualification']
},

email: ['email', 'mailto', 'free_email', 'internet_email', 'mailTo', 'freeEmail', 'internetEmail'],

business: {
  creditCardNumbers: ['credit_card', 'creditCard']
},

phone: ['cell_phone', 'phone', 'phone_number'],

extension: ['extension', 'ext'],

faxNumber: ['fax_number', 'fax']

This awesome jQuery plugin is developed by abhinavmsra. For more Advanced Usages, please check the demo page or visit the official website.