Inline Form Validation

This example validates an email address format and uniqueness (only test@test.com will work) when the input fires a 'change' event.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

  • A intercooler-based form tag is being used.
  • Within the form tag is an input for an email that does server side validation. It does this by using a ic-post-to to post the email to the server when the input changes. It targets the enclosing div tag, using the ic-target attribute and the closest syntax. Because we need to replace the entire div to get the proper styling, the ic-replace-target attribute is set to true

Demo

Contact Info



  <h3>Contact Info</h3>

  <form ic-post-to="/contact">
    <div class="form-group">
      <label class="control-label">Email Address <i id="email-ind" class="fa fa-spinner fa-spin" style="display:none"></i> </label>
      <input class="form-control" name="email" ic-post-to="/contact/email" ic-target="closest div" ic-replace-target="true" ic-indicator="#email-ind">
    </div>
    <div class="form-group">
      <label>First Name</label>
      <input type="text" class="form-control" name="firstName">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" name="lastName">
    </div>
    <button class="btn btn-default">Submit</button>
  </form>

  <script>

    //========================================================================
    // Mock Server-Side HTTP End Point
    //========================================================================
    $.mockjax({
      url: "/contact",
      response: function (settings) {
        this.responseText = formTemplate();
      }
    });

    $.mockjax({
      url: "/contact/email",
      responseTime: 450 ,
      response: function (settings) {
        var params = parseParams(settings.data);
        var email = params['email'];
        if(!/\S+@\S+\.\S+/.test(email)) {
          this.responseText = emailInputTemplate(email, "Please enter a valid email address");
        } else if(email != "test@test.com") {
          this.responseText = emailInputTemplate(email, "That email is already taken.  Please enter another email.");
        } else {
          this.responseText = emailInputTemplate(email, null);
        }
      }
    });

    //========================================================================
    // Mock Server-Side Templates
    //========================================================================

    var originalForm = $('form').html();
    function formTemplate() {
      return originalForm;
    }

    function emailInputTemplate(val, errorMsg) {
      return '<div id="email-div" class="form-group has-' + (errorMsg ? 'error' : 'success') + ' has-feedback"> \
               <label class="control-label">Email Address</label> \
               <input class="form-control" name="email" ic-replace-target="true" \
                      ic-post-to="/contact/email" ic-target="#email-div" value="' + val + '">' +
               (errorMsg ? '<span class="help-block text-error">' + errorMsg + '</span>' : "") +
             '</div>';
    }

  </script>