Versatile Form Validation And AJAX Submit Plugin - jQuery VaSe

Versatile Form Validation And AJAX Submit Plugin - jQuery VaSe
File Size: 18.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<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"}' />


3. Initialize the form validatior on the html form.


4. Customize the form validation rules.

  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': /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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.


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

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

  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.


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




  • JS update


  • reference issue update


  • added string method calling


  • vase update onSend:before callback and js cleanup


  • Bugfixed.


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


  • 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.