Versatile Form Validation And AJAX Submit Plugin - jQuery VaSe

VaSe is a versatile form manipulation plugin for jQuery that validates the form fields and send the valid form data to the server using AJAX post.

How to use it:

1. Insert jQuery JavaScript library and the jQuery VaSe plugin's script into the html page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="vase.js"></script>

2. Add validators to your HTML form using HTML data attributes as follows:

• data-vase-type: validation type (form, name, submitm, statys, or agreement)
• data-vase-field-type: field type (alpha, name, email, phone)

<form method="post" data-vase-type="form">

  <input id="fld_name" type="text" name="fld_name" required="required" data-vase='{"field_type": "field", "field_data_type": "name", "wrong_input_text": "Incorrect name format"}' />

  <input id="fld_email" type="email" name="fld_email" required="required" data-vase='{"field_type": "field", "wrong_input_text": "Incorrect E-mail format"}' />

   <input id="fld_phone" type="tel" name="fld_phone" required="required" data-vase='{"field_type": "field", "wrong_input_text": "Incorrect phone number format"}' />

   <input id="agreement_1" type="checkbox" name="agreement_1" value="1" required="required" data-vase='{"field_type": "agreement", "wrong_input_text": "Must be checked"}' />

</form>

3. Initialize the form validatior on the html form.

$('[data-vase-type="form"]').VaSe();

4. Customize the form validation rules.

$('[data-vase-type="form"]').VaSe({
  input: {
  
    fields: [
      /*
      {
          obj: null,
          label: null,
          type: 'tel',
          data_field_type: 'phone', //possible types: phone, name, email. Used for regex_table
          max_length: 20,
          required: true
      },
      */
    ],

    agreements: [
      /*
      {
          obj: null,
          type: 'checkbox',
          required: true,
          checked: true,
      }
      */
    ],

    regex_table: {
      'alpha': /^$/,
      'phone': /(\(?(\+|00)?48\)?([ -]?))?(\d{3}[ -]?\d{3}[ -]?\d{3})|([ -]?\d{2}[ -]?\d{3}[ -]?\d{2}[ -]?\d{2})/,
      'email': /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      'name': /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšśžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŚŽ∂ð ,.'-]+$/
    },

    //dictionary is used to exchange input names into values from the dictionary on API request
    data_dictionary: {} //'sc_fld_telephone': 'phone'

  },
});

5. More configuration options.

$('[data-vase-type="form"]').VaSe({

  api: {
    url: 'test',
    custom: [
        {name: 'api_key', value: ''},
    ],
    param: {
        success: {name: 'result', value: 'success'},
        message: '',
    },
  },

  //data
  data: {
    form_method: "post",
    send_headers: true,
  },

  //status
  status: {
    ajax_processing: false,
    response_from_api_visible: true,
  },

  //content - text
  text_vars: {
    wrong_input_text: "Wrong input",
    status_success: "Form sent successfuly",
    status_sending: "Sending form...",
    status_error: "Server encountered an error",
  },

  //form info
  novalidate: true,

});

6. Callback functions.

$('[data-vase-type="form"]').VaSe({

  callbacks: {
    onSend: {
      success: {
        function: null,
        this: this,
        parameters: null,
      },
      error: {
        function: null,
        this: this,
        parameters: null,
      }
    }
  }

});

Changelog:

2024-02-17

• Check if a callback exists before calling it

2023-06-17

• Fix onValidate callback call

2019-05-29

• JS update

2019-04-08

• JS update

2019-01-18

• JS update

2018-07-08

• reference issue update

2018-06-11

• added string method calling

2018-03-23

• vase update onSend:before callback and js cleanup

2018-03-21

• Bugfixed.

2018-03-06

• update has--content check, now fires on init (if input has value from the beginning)

2018-02-23

• Small fix to validation on input

---

This awesome jQuery plugin is developed by Falkan3. For more Advanced Usages, please check the demo page or visit the official website.