reform.js v1.0.10

Reform.js

Modern forms finally made easy.

Note: In order to use this JavaScirpt plugin an instance of jQuery 3.0 or higher is required. You can get jQuery here.

Table of Contents

1. Installation
   • Download
   • CDN
   • NPM
2. Sample Useage
3. Input / Textarea
4. Checkbox / Radio
5. Select
6. JavaScript Settings
   • General Settings
   • Localisation Settings
   • Validation Settings
7. Events
8. Information
   • Browser Support
   • Dependencies
   • Copyright and Licence

Installation

Reform.js is available as a classic download, via CDN and via NPM.

Download

Download latest Reform.js (compressed)

CDN

<script src="https://cdn.jsdelivr.net/npm/reform.js@1/dist/reform.min.js"></script>

NPM

npm install reform.js

Sample Useage

This chapter shows some exsamples how to correctly use Reform.js.

Setup and passing Settings

Besides adding the reform.js file at the end of your HTML-file right before closing the body-Tag after the jQuery file you have to add the following line into your JavaScript file:

$(document).ready(function() {
  $('form').reform();
})

You can also pass some settings for reform by simply changing the code above like this:

$(document).ready(function() {
  $('form').reform({
    debugMode: true
  });
})

Input / Textarea

Sample Build

<!-- basic input -->
<label>
  <p>Sample</p>
  <input type="text" name="sample">
</label>

<!-- basic textarea -->
<label>
  <p>Sample</p>
  <textarea name="sample"></textarea>
</label>

<!-- full example-->
<label class="rf-req rf-val" rf-val="email">
  <p>Sample</p>
  <input type="email" name="sample">
</label>

CSS / LESS Rules

// default
label {}
label > p {}
label > input {}

// error
label.rf-error {}
label.rf-error > p {}
label.rf-error > input {}

// error information
label.rf-error > p.rf-error-info {}

Class List

Attribute List

Checkbox / Radio

Sample Build

<!-- basic checkbox -->
<label class="rf-checkbox">
  <input type="checkbox" name="sample">
  <p>Sample</p>
</label>

<!-- basic radio -->
<label class="rf-radio">
  <input type="radio" name="sample">
  <p>Sample</p>
</label>

<!-- required checkbox or radio -->
<label class="rf-checkbox rf-req">
  <input type="checkbox" name="sample">
  <p>Sample</p>
</label>

CSS / LESS Rules

// default checkbox and radio
label.rf-checkbox, label.rf-radio {}
label.rf-checkbox > p, label.rf-radio > p {}
label.rf-checkbox > input, label.rf-radio > input {}

// checkbox styling
label.rf-checkbox > p::before {}
label.rf-checkbox > p::after {}

// radio styling
label.rf-radio > p::before {}
label.rf-radio > p::after {}

// checked checkbox styling
label.rf-checkbox > input:checked + p::before {}
label.rf-checkbox > input:checked + p::after {}

// checked radio styling
label.rf-radio > input:checked + p::before {}
label.rf-radio > input:checked + p::after {}

// error
label.rf-checkbox.rf-error, label.rf-radio.rf-error {}
label.rf-checkbox.rf-error p, label.rf-radio.rf-error p {}
label.rf-checkbox.rf-error p::before, label.rf-radio.rf-error p::before {}

Class List

Grouping

You can group checkboxes or radios with required fields. With that, only one of the checkboxes or radios have to be checked to pass the requirement. In addition, checkboxes behave like radio buttons but a checked element can be unchecked by an user.

This for example can be used to request genders optionally with radio-button styling:

<p>Gender</p>
<div class="rf-group">
  <label class="rf-radio rf-req">
    <input type="checkbox" name="gender" value="female">
    <p>Female</p>
  </label>
  <label class="rf-radio rf-req">
    <input type="checkbox" name="gender" value="male">
    <p>Male</p>
  </label>
</div>

Select

Sample Build

<label class="rf-select">
  <p>Sample</p>
  <select name="sample" placeholder="Please select ...">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</label>

Note: As you can see in the code sample above Reform.js adds the posibility to add a placeholder to your select. Adding the placeholder="" attribute to your select will act just like you expect to.

CSS / LESS Rules

// default select
label.rf-select {}
label.rf-select > p {}
label.rf-select > select {}
label.rf-select::after {}

// error
label.rf-select.rf-error{}
label.rf-select.rf-error > p {}
label.rf-select.rf-error > select {}

Class List

JavaScript Settings

General Settings

this.defaults = {
  ajax: {},
  convert: 'serialize',
  debugMode: false,
  lang: 'en',
  localization: { ... },
  type: 'post',
  url: null,
  validation: { ... }
};

Localisation Settings

this.defaults = {
  localization: {
    en: {
      errorMinLength: 'Please enter at lease 2 characters.',
      errorValidationUrl: 'Web url not valid.',
      errorValidationEmail: 'Email address not valid.',
      errorValidationPhone: 'Phone number not valid.',
      errorValidationCustom: 'Field could not be validated.'
    }
  }
};

Validation Settings

this.defaults = {
  validation: {
    minLength: 2,
    displayRequireErrorInfo: false,
    displayValidationErrorInfo: true,
    submitOnRequireError: false,
    submitOnValidationError: false
  }
};

Events

Example code for calling an event

var reform = $(element).reform();

reform.on('rf-validation-after', function(reformParent) {
  console.log('Reform is validated.');
});

All events

Information

Browser support

Reform.js supports Internet Explorer 10+ and the latest two versions of Google Chrome, Mozilla Firefox, Opera, Apple Safari and Microsoft Edge. (earlier versions may work but aren't tested)

Dependencies

jQuery 3.0+ (earlier versions may work but aren't tested)

Copyright and License

Copyright © 2018 Daniel Neubert Licensed under the MPL 2.0 license.