📜️ Formey

• What is Formey
• Getting started
  • CDN
  • Download
  • NPM
• Usage
• API
  • Attributes
  • Options
• License

What is Formey

Formey is a JavaScript code that prevents <form> from being submitted after the first submission.

• No dependencies
• Zero-configuration out-of-the-box
• Utilizes HTML5 data attributes
• 0.6 kB gziped

Getting started

CDN

Place the latest production bundle before the closing </body> and call formey:

<script src="https://unpkg.com/formey"></script>
<script>
  formey();
</script>

Download

Download formey.js or minified production ready formey.min.js. Place it before the closing </body> and call dialog init:

<script src="script/formey.min.js"></script>
<script>
  formey();
</script>

NPM

Install package with npm install formey. Call formey:

import formey from 'formey';

formey()

Usage

Use data attributes to enable formey prevent form from being submitted more than once.

<form data-submit-once>
  <!-- form markup -->
</form>

You can specify data-submit-text with custom text on submit trigger (button or input). Once the form is submitted, submit trigger text will change to then given via data-submit-text attribute.

<form data-submit-once>
  <!-- form markup -->
  <button data-submit-text="Sending...">Send</button>
</form>

See Example.

API

Attributes

Attribute: data-submit-once
Value: None.
Placement: <form> elements.
Description: Form with this attribute will be prevented from submission more than once.

Attribute: data-submit-text
Value: Any.
Placement: Submit types of <button> and <input>.
Description: Once the form is submitted, text of element with this attribute will change to the given.

Options

Pass options object to formey function. E.g.:

formey({
  formAttr: 'data-form',
  submitInProcessAttr: 'data-submitting'
});

| Key | Type | Default | Description | | - | - | - | - | | formAttr | String | data-submit-once | Data attribute to mark form to be processed. | | submitTextAttr | String | data-submit-text | Data attribute to specify custom text label for submit trigger element. | | submitInProcessAttr | String | false | Specified data attribute will be added to the given element after form is being submitted. (Tip: May be useful for custom CSS styling) | | clearAttrsOnInit | Boolean | true | Remove formey data attributes from HTML elements after init. |

License

This project is licensed under the MIT License - see the LICENSE file for details.