コンバージョン率アップを目指せ！ ユーザビリティの高い入力フォーム（2/2）

<!-- 中略 -->
 
 <label class="form-table-text" for="js-form-company" onclick="">
 
 会社名
 
 <span class="mark">任意</span>
 
 </label>
 
 <!-- 中略 -->
 
 <input class="input" id="js-form-company" type="text" placeholder="株式会社LIG" name="company" data-key="company">
 
 <!-- 中略 -->

(function () {
 
 
 
  'use strict';
 
 
 
  var $form = $('#js-form'),
 
  $data = $form.find('.js-require'),
 
  $button = $form.find('.button');
 
 
 
 // ↓--------------------------------------------------↓ F
 
  var validations = {
 
  user: false,
 
  comment: false
 
  }
 
 // ↑--------------------------------------------------↑ F
 
 
 
 // ↓--------------------------------------------------↓ A
 
  function setError(elm){
 
  elm.addClass('is-error');
 
  }
 
 // ↑--------------------------------------------------↑ A
 
 
 
 // ↓--------------------------------------------------↓ B
 
  function removeError(elm){
 
  elm.removeClass('is-error');
 
  elm.addClass('is-success');
 
  }
 
 // ↑--------------------------------------------------↑ B
 
 
 
 // ↓--------------------------------------------------↓ C
 
  function keyHandler(self){
 
  var dataKey = self.data('key');
 
  var $target = $('#js-form-' + dataKey);
 
  var val = self.val();
 
  if(val === ""){
 
  setError($target);
 
  } else {
 
  removeError($target);
 
  }
 
  }
 
 // ↑--------------------------------------------------↑ C
 
 
 
 // ↓--------------------------------------------------↓ D
 
  function checkValidations(self) {
 
  var dataKey = self.data('key');
 
  var key = self.attr('id').substr(8);
 
  var val = self.val();
 
  if(val === ""){
 
  validations[key] = false;
 
  } else {
 
  validations[key] = true;
 
  }
 
  }
 
 // ↑--------------------------------------------------↑ D
 
 
 
 // ↓--------------------------------------------------↓ E
 
  function allowButton(){
 
  if(validations.user === true &&
 
  validations.comment === true
 
  ){
 
  $button.removeClass('is-disable');
 
  } else {
 
  $button.addClass('is-disable');
 
  }
 
  }
 
  allowButton();
 
 // ↑--------------------------------------------------↑ E
 
 
 
 // ↓--------------------------------------------------↓ G
 
  $data.on('change keyup focusout', function(){
 
  keyHandler($(this));
 
  checkValidations($(this));
 
  allowButton();
 
  });
 
 // ↑--------------------------------------------------↑ G
 
 })();