Asli

# Form AJAX

Customization Reference
HTML selector 🔧 [data-arts-component-name="FormAJAX"]
Component source 📄 HTML/js/components/FormAJAX.js
Component source (gulp) 📄 SOURCE/components/formAJAX/FormAJAX.js

# Default Options

defaults: {
  pristine: {
    classTo: 'input-float', // class of the parent element where the error/success class is added
    errorClass: 'input-float_invalid',
    successClass: 'input-float_valid',
    errorTextParent: 'input-float', // class of the parent element where error text element is appended
    errorTextTag: 'span', // type of element to create for the error text
    errorTextClass: 'input-float__error' // class of the error text element
  }
}

# HTML Markup

<form
  class="js-form-ajax"
  action="mail.php"
  method="POST"
  novalidate="novalidate"
  data-arts-component-name="FormAJAX"
  data-message-success="Thanks for your message! We will reply to you as soon as possible."
  data-message-error="Something went wrong :( Please contact me directly at &lt;a href='mailto:asli@example.com'&gt;asli@example.com&lt;/a&gt;"
  >
  ...
</form>

# Customization

# 1. Customizing success and error messages

In the component HTML markup, edit the [data-message-success] and [data-message-error] attributes.







 
 




<form
  class="js-form-ajax"
  action="mail.php"
  method="POST"
  novalidate="novalidate"
  data-arts-component-name="FormAJAX"
  data-message-success="Custom success message"
  data-message-error="Custom error message"
  >
  ...
</form>

# 2. Customizing validation error messages

In the component HTML markup, edit the [data-pristine-*] attributes of the input fields.




















 













 
 























<form
  class="js-form-ajax"
  action="mail.php"
  method="POST"
  novalidate="novalidate"
  data-arts-component-name="FormAJAX"
  data-message-success="Thanks for your message! We will reply to you as soon as possible."
  data-message-error="Something went wrong :( Please contact me directly at &lt;a href='mailto:asli@example.com'&gt;asli@example.com&lt;/a&gt;"
  >
  ...
  <div class="row form__row">
    <!-- input #1 -->
    <div class="col-12 col-lg-6 form__col">
      <label class="input-float">
        <input
          class="input-float__input"
          type="text"
          name="visitor_name"
          required="required"
          data-pristine-required-message="Please enter your name"
          />
        <span class="input-float__label">Your Name</span>
      </label>
    </div>
    <!-- - input #1 -->
    <!-- input #2 -->
    <div class="col-12 col-lg-6 form__col">
      <label class="input-float">
        <input
          class="input-float__input"
          type="email"
          name="visitor_email"
          required="required"
          data-pristine-email-message="Please enter a correct email"
          data-pristine-required-message="Please enter your email"
          />
        <span class="input-float__label">Your Email</span>
      </label>
    </div>
    <!-- - input #2 -->
  </div>
  <!-- input #3 -->
  <div class="row form__row">
    <div class="col form__col">
      <label class="input-float">
        <textarea
          class="input-float__input input-float__input_textarea"
          name="visitor_msg"
          >
        </textarea>
        <span class="input-float__label">Your Message</span>
      </label>
    </div>
  </div>
  <!-- - input #3 -->
  ...
</form>

For more customization, please refer to the official documentation of the PristineJS (opens new window) library.

← Google Map →