require(['html-form-validation', function (Validator) {});

var Validator = require('html-form-validation');

import Validator from 'html-form-validation';

/**
 * First param. Form to validate.
 *
 * @type {jQuery|HTMLElement|String}
 */
var form = $('form');

/**
 * Second param. Function performed after validation (if form is valid). Should return options for ajax request performed after.
 *
 * @type {Function|Object}
 * @return {Object} options for ajax request
 */
var onSuccess = function (context) {
  console.log('this code runs before ajax request');

  return {
    url: 'ajax/example.json',
    method: 'get',
    success: function () {
      console.log('ajax success callback');
    }
  }
};

/**
 * Third param. User-specified options. Unnecessary.
 *
 * @type {Object}
 */
var options = {
  // If form is situated in bootstrap modal (login form etc.),
  // incorrect field state will be removed when modal is closed.
  // DEFAULT: false
  modal: false,
  // Selector to find form's fields.
  // When changing, you should also change CSS styles.
  // DEFAULT: '.form-input'.
  fieldsSelector: '.form-input',
  // Remove fields incorrect state, when clicked outside the form.
  // DEFAULT: false.
  removeOnFocusOut: false,
  // Perform AJAX request with specified options if form is valid.
  // DEFAULT: true.
  ajax: true
};

/** Initialize Validator */
new Validator(form, onSuccess, options);

/** Or initialize with jQuery */
form.validator(onSuccess, options);

const onSuccess = context => {
  // function should return Promise
  return new Promise((resolve, reject) => {
    // perform async actions. main ajax request will be performed on promise resolve
    $.ajax({
      url: 'path/to/async/action',
      method: 'get',
      // remember, function must return options for AJAX request
      success: res => resolve({
        url: 'path/to/main/ajax',
        method: 'post',
        success: res => console.log(res)
      }),
      error: xhr => reject(xhr)
    });
  })
};