AjaxSubmit live demo application

Library source code

Demo source code

Download

Author: Bogdan Gusiev



Try to subscribe or register with empty or invalid email to see the ajax validation.

Subscribe to newsletter:

This form show how different error styles could be combined in one form



HTML:

<form accept-charset="UTF-8" action="/subscriptions" class="ajax-form" id="new_subscription" method="post">
    <div class="field" validate="first_name">
      <label for="subscription_first_name">First name</label><br />
      <div style="width: 258px">
        <input id="subscription_first_name" name="subscription[first_name]" type="text" />
        <div class="validation-custom blue right">
          <span class="validation-message"></span>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="field" validate="last_name">
      <label for="subscription_last_name">Last name</label><br />
      <input id="subscription_last_name" name="subscription[last_name]" type="text" />
      <div class="validation-custom green">
        <span class="validation-message"></span>
      </div>
    </div>
    <div class="field" validate="email">
      <div class="left">
        <label for="subscription_email">Email (can be fake)</label><br />
        <input id="subscription_email" name="subscription[email]" type="text" />
      </div>
      <div class="validation-custom red">
        <span class="validation-message"></span>
      </div>
    </div>
    <div class="clear"></div>
    <div class="actions">
      <input name="commit" type="submit" value="Create Subscription" />
    </div>
</form>