Versatile Form Validation And AJAX Submit Plugin - jQuery VaSe

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 server using AJAX post.

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</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-type="field" data-vase-field-type="name"/>
  <input id="fld_email" type="email" name="fld_email" required="required" data-vase-type="field"/>
  <input id="agreement_1" type="checkbox" name="agreement_1" value="1" data-vase-type="agreement"/>
  <button type="submit" class="button" data-vase-type="submit">Send</button>
  <div class="status" data-vase-type="status"></div>
</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': /^(([^<>()[\]\\.,;:\[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.

$('[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,
      }
    }
  }
});

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

  • Publication date: 22.02.2018
  • Source