Client-side validation in custom forms using Drupal, Bootstrap 3, and Boostrap Validator plugin

I need to add form client-side validation to my custom form. I'm using the Bootstrap theme but it doesn't include any type of validation so I decided to use the Bootstrap Validator plugin. Examples of validation can be found here: http://1000hz.github.io/bootstrap-validator/#validator-examples

The first thing I need to do is download and install the Email module here: https://www.drupal.org/project/email. The problem, at the time of writing, is that this module does not include the functionality to have the form type 'email' in custom forms (the module is currently only for fields). The good news is there is a patch: https://www.drupal.org/files/issues/email_form_type-970068-16.patch but I would check the issue queue to see if this has now been implemented into the current module version here: https://www.drupal.org/node/970068. If not, run the patch.

The next thing we have to do is include the validator JS file. That can be downloaded here: https://github.com/1000hz/bootstrap-validator. Locate the file validator.min.js in the dist folder and place it into a Library folder in Drupal - I created the folder sites\all\libraries\bootstrapvalidator and put the validator.min.js file in it. It is assumed you are using the libraries module: https://www.drupal.org/project/libraries

Now that we can have a custom form type 'email' in our forms, but we need to add the Bootstrap class 'form-control' to the form element as this form type is not known to the Bootstrap theme. To do this, place the following into your theme's template.php file (as usual, use your theme name for the hook by replacing THEMENAME with it).

<?php
/**
 * Implements hook_element_info_alter().
 */
function THEMENAME_element_info_alter(&$elements) {
  if (isset(
$elements['email'])) {
   
$elements['email']['#process'][] = '_email_type_process_input';
  }
}

/**
 * Process email input element.
 */
function _email_type_process_input(&$element, &$form_state) {
 
// Only add the "form-control" class for specific element input types.
 
$types = array(
   
'email',
  );
  if (!empty(
$element['#type']) && (in_array($element['#type'], $types) || ($element['#type'] === 'file' && empty($element['#managed_file'])))) {
   
$element['#attributes']['class'][] = 'form-control';
  }
  return
$element;
}
?>

Now we can create our custom form. Below is an example of the markup we need to add to the form to make validation work. Note: I'm adding columns to via prefix and suffix purley for styling, this can be ignored. What you need to do to make validation work is add attributes and field_suffix data as shown below. To automatically enable form validation without using Javascript, add 'data-toggle="validator' attribute to the form element as shown below.

<?php
function MODULE_our_custom_form($form, &$form_state) {

 
// Needed for bootstrap validation.
 
$form['#attributes']['data-toggle'] = 'validator';

 
// Attach the validator.min.js file to the form.
 
$form['#attached']['js'] = array(
   
libraries_get_path('bootstrapvalidator') . '/validator.min.js',
  );

 
$form['name'] = array(
   
'#type' => 'textfield',
   
'#title' => '',
   
'#required' => TRUE,
   
'#placeholder' => t('Your name'),
   
'#prefix' => '<div class="panel-body"><div class="row"><div class="col col-sm-4">',
   
'#suffix' => '</div>',
   
// The following is added to make validation work.
   
'#attributes' => array(
     
'required' => 'required',
     
'data-error' => t('Please enter your name.'), // Message shown on error.
   
),
   
'#field_suffix' => '<div class="help-block with-errors"></div>', // The place where the error message appears.
 
);
 
$form['mail'] = array(
   
'#type' => 'email',
   
'#title' => '',
   
'#required' => TRUE,
   
'#placeholder' => t('Your email address'),
   
'#prefix' => '<div class="col col-sm-4">',
   
'#suffix' => '</div>',
   
// The following is added to make validation work.
   
'#attributes' => array(
     
'required' => 'required',
     
'data-error' => t('Please enter a valid email address.'), // Message shown on error.
   
),
   
'#field_suffix' => '<div class="help-block with-errors"></div>', // The place where the error message appears.
 
);
 
$form['submit'] = array(
   
'#type' => 'submit',
   
'#value' => t('Test form'),
   
'#attributes' => array('class' => array('btn-primary', 'pull-left')),
   
'#prefix' => '<div class="col col-sm-4">',
   
'#suffix' => '</div></div></div></div>',
  );

  return
$form;
}
?>

Here is an example of the custom form with Bootstrap client validation: