quasiform

This is JavaScript library that helps submit and validate your forms. Keep your validation logic on server side, and for client side validate with javascript and AJAX. Supports multiple reCaptcha 3.

Real life examples

• https://quasi-art.ru/contacts
• http://isp-company.ru/contacts
• http://legendame.ru/contacts
• https://vetspb.ru/contacts
• https://grandleather.ru/contacts
• http://city-meter.ru/contacts
• http://schisto.ru/contact
• https://shoptesla.ru/contacts.html
• http://stomatologia-ulibka.ru/zapis-na-priem

How to run demo locally

Install dependencies

  $ yarn

Run php server

  $ php -S 0.0.0.0:8000

Open http://0.0.0.0:8000/docs/ in browser

How to use as umd library on any website

Demo: https://quasiform.quasi-art.ru/forms/simple

<script src="https://quasiform.quasi-art.ru/assets/templates/main/js/quasiform.min.js"></script>

<script>
  var contactsForm = new quasiform({
    selector: '#contacts-form-wrapper',
  });
</script>

How to use as es-module

Install

yarn add quasiform

Add to your script

import quasiform from 'quasiform';

Init

const options = {
    selector: '#contacts-form',
    hideFormOnSuccess: false,
};
const quasiformContacts = new quasiform(options);

Add some HTML to your page

<div id="post" class="quasiform-wrapper">
  <div data-quasiform="errors" style="display: none;" class="quasiform-errors"></div>
  <div data-quasiform="messages" style="display: none;" class="quasiform-messages"></div>
  <div data-quasiform="loader" style="display: none;" class="quasiform-loader"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
  <div data-quasiform="html" style="display: none;" class="quasiform-html">
    <!-- HTML response will be here-->
  </div>
  <form action="post.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" class="quasiform-form">
    <div class="row">
      <div class="col m6 s12">
        <div class="quasiform-form__form-group">
          <label for="name" class="quasiform-form__label">Name</label>
          <input id="name" type="text" name="name" value="Vasya" placeholder="Имя" class="quasiform-form__input">
        </div>
      </div>
    </div>
    <div class="quasiform-form__form-group">
      <label class="quasiform-form__label--checkbox">
        <div data-quasiform="checkbox" data-name="checkbox-agree" data-quasiform-checkbox-off="quasiform-form-checkbox--off" class="quasiform-form-checkbox"><i class="fa fa-check"></i></div>
        <input type="checkbox" name="checkbox-agree" value="1" data-quasiform="agreement" checked="" style="display: none;">Agree
      </label>
    </div>
    <div class="quasiform-form__form-group">
      <button type="submit" class="quasiform-form__submit">Send</button>
    </div>
  </form>
</div>

Options

debug

Default: false

errorOpenTag

Defaut: <li>

errorCloseTag

Defaut: </li>

errorsOpenTag

Defaut: <ul>

errorsCloseTag

Defaut: </ul>

messageOpenTag

Defaut: <li>

messageCloseTag

Defaut: </li>

messagesOpenTag

Defaut: <ul>

messagesCloseTag

Defaut: </ul>

hasErrorInputClass

Defaut: quasiform__form-input--has-error

hasErrorLabelClass

Defaut: quasiform__form-label--has-error

callbackOnSuccess

Callback function to be invoked after the form has been submitted. If a success callback function is provided it is invoked after the response has been returned from the server.

callbackOnFail

Callback function to be invoked upon error.

File Uploads

The Form Plugin supports use of XMLHttpRequest Level 2 and FormData objects on browsers that support these features.

Screenshots

Custom checkbox

Loader

Error messages

Star rating

Success response

Initialization

JavaScript

let optionsPost = {
    debug: true,
	selector: '#post',
    hasErrorInputClass: 'has-error',
    hasErrorLabelClass: 'has-error',
    hideFormOnSuccess: false,
    callbackOnSuccess: function callbackOnSuccess(wrapper) {
        console.debug(wrapper);
    },
    callbackOnFail: function callbackOnFail(wrapper) {
        console.debug(wrapper);
    },
};
let quasiformPost = new quasiform(optionsPost);

HTML

<div id="post" class="quasiform-wrapper">
	<div data-quasiform="errors" style="display: none;" class="quasiform__errors"></div>
	<div data-quasiform="messages" style="display: none;" class="quasiform__messages"></div>
	<div data-quasiform="loader" style="display: none;" class="quasiform__loader">
		Я отправляю форму
	</div>
	<form action="post.php" method="post" accept-charset="utf-8" class="quasiform__form" enctype="multipart/form-data">
		<div class="quasiform__form__form-group">
			<label for="text" class="quasiform__form-label">Сообщение</label>
			<textarea id="text" name="text" placeholder="Ваше сообщение" class="quasiform__form-textarea">Hello</textarea>
		</div>
		<div class="quasiform__form__form-group">
			<button type="submit" class="quasiform__form-submit">Отправить</button>
		</div>
	</form>
</div>

Server response

{
	"errors": ["Error 1", "Error 2"],
	"messages": ["Message 1", "Message 2"],
	"success": true
}

Roadmap

• Clear form after submit.
• Demo of multiple recaptcha
• Detect offline
• Check if response is not json
• Customization of Spinner
• Customization of Star Rating
• Customization of File Input