Routed Contact Form

Contact routing form based on user input

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form id="commentForm" method="get" action="" class="form-horizontal">
        <div id="rootwizard">
          <ul>
            <li><a href="#tab1" data-toggle="tab">Step 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Step 2</a></li>
            <li><a href="#tab3" data-toggle="tab">Step 3</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane" id="tab1">
              <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <div class="input-group">
                  <input type="text" id="namefield" name="namefield" class="required">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label" for="email">Email</label>
                <div class="input-group">
                  <input type="text" id="emailfield" name="emailfield" class="required email">
                </div>
              </div>
              
            </div>
            <div class="tab-pane" id="tab2">
              <div class="control-group">
                <label class="control-label" for="url">URL</label>
                <div class="controls">
                  <input type="text" id="urlfield" name="urlfield" class="required url">
                </div>
              </div>
            </div>
            <div...

JavaScript

$(document).ready(function() {
  var $validator = $("#commentForm").validate({
    rules: {
      emailfield: {
        required: true,
        email: true,
        minlength: 3
      },
      namefield: {
        required: true,
        minlength: 3
      },
      urlfield: {
        required: true,
        minlength: 3,
        url: true
      }
    }
  });

  $('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-pills',
    'onNext': function(tab, navigation, index) {
      var $valid = $("#commentForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    }
  });
});