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

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

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.