$(document).ready(function(){
  markupValidation("form1");
});

/* 
	This is called when we hit Submit we call the validation function with the formID, and provide a call back function to 
	take the error messages (data-msg). If the form is not valid then we use the notification box.
  we could easily put the erDesc string into the notification box instead which would list the missing fields based on each
  elements data-msg attribute but we are not using this in the example.
*/
function validate(){
  validateDynamicForm("form1",function(isValid,erDesc){
      if(isValid){
        alert("form valid");
      }else{
        // here i show a notification box but you could
        // easily alert the erDesc variable for a list of 
        // data-msg values for missing form fields
        if($('.generic_notification').length){
          resetNotification('generic_notification');
          setNotification('generic_notification','active warning','Required fields missing, please see below<br>' + erDesc,'fa fa-exclamation-circle');
          $('html, body').animate({
            scrollTop: $(".generic_notification").offset().top
          }, 1000);
        }else{
          // a fall back
          alert('Required fields missing, missing fields have been marked in red');
        }
      }
    });
}


// here we have the function that adds the * to required fields.
function markupValidation(formID){
  var fields = $('#' + formID + ' INPUT, #' + formID + ' SELECT, #' + formID + ' TEXTAREA'); 
  for(var i=0; i < fields.length; i++) { 
    var $fieldID =  fields[i].id;
    var $label = $('#' + formID + ' LABEL[for=' + $fieldID + ']');

    if(fields[i].hasAttribute('required')) { 
      $label.text($label.text().replace('*',''));
      $label.text($label.text()+'*');
    }

    if(fields[i].hasAttribute('data-lbl')) { 
      var $dataLbl = $('#' + $fieldID).attr('data-lbl');
      if($dataLbl !== undefined){
        $label.text($label.text().replace($dataLbl,''));
        $label.text($label.text()+$dataLbl);
      }
    }
  }
}

/*  --------------------------- Notifications --------------------------- */
function resetNotification(notificationClass){
  $('.' + notificationClass).removeClass('active warning info success error');
  $('.' + notificationClass).find('.icon').removeClass().addClass('icon');
}

function setNotification(notificationClass,classNames,textHtml,iconClass){
  $('.' + notificationClass).addClass(classNames).find('.txt').html(textHtml);
  $('.' + notificationClass).find('.icon').addClass(iconClass);
}
/*  --------------------------- //Notifications --------------------------- */


function validateDynamicForm(formID,callback){
  /*
    -----------------------------------------------------------------------------------
     Validation Routine, loops through items with a "required" attribute.
    -----------------------------------------------------------------------------------
    Passed Values:
      formID - locks validation to within a certain fromID.
      callback - a function that gets form valid and the error description passed back.

    Form Attributes / Usage:
      data-lenth	- for text areas that need restricted character length
      data-msg		- return message if field fails validation
    -----------------------------------------------------------------------------------
  */

  var $formIsValid	 = true;
  var $formErMsgs		= "";
  var fields				= $('#' + formID + ' INPUT, #' + formID + ' SELECT, #' + formID + ' TEXTAREA'); 

  for(var i=0; i < fields.length; i++) { 
    if(fields[i].hasAttribute('required') && !fields[i].hasAttribute('disabled')) { 
      var $fieldID =  fields[i].id;
      var $fieldName =  fields[i].name;
      var $fieldType = fields[i].type;
      var $fieldLimit = "";
      var $fieldErrorDesc = "";
      var $fieldLabel = $('#' + formID + ' LABEL[for=' + $fieldID + ']').text();
      var $fieldLabelError = $('#' + formID + ' LABEL[for=' + $fieldID + ']');
      var $fieldRowError = $('#' + formID + ' LABEL[for=' + $fieldID + ']').closest('.form_row');
      $fieldLabelError.removeClass('incomplete');
      $fieldRowError.removeClass('incomplete');
      $fieldLimit = (fields[i].hasAttribute('data-length')) ? $('#' + formID + ' #' + $fieldID).attr("data-length") : "";
      $fieldErrorDesc =(fields[i].hasAttribute('data-msg')) ? $('#' + formID + ' #' + $fieldID).attr("data-msg") : "";
   
      switch($fieldType){
      case "text":
        if ($('#' + formID + ' #' + $fieldID).val() === '' && $('#' + formID + ' #' + $fieldID).is(':visible')){
          $formIsValid = false;
          $fieldLabelError.addClass('incomplete');
          $fieldRowError.addClass('incomplete');
          $formErMsgs = $formErMsgs + ' - ' + $fieldErrorDesc + ' <br/>';
        }
        break;
      case "password":
        if ($('#' + formID + ' #' + $fieldID).val() === '' && $('#' + formID + ' #' + $fieldID).is(':visible')){
          $formIsValid = false;
          $fieldLabelError.addClass('incomplete');
          $fieldRowError.addClass('incomplete');
          $formErMsgs = $formErMsgs + ' - ' + $fieldErrorDesc + ' <br/>';
        }
        break;
       case "email":
        if (validateEmail($('#' + formID + ' #' + $fieldID)) == -1){
          $formIsValid = false;
          $fieldLabelError.addClass('incomplete');
          $fieldRowError.addClass('incomplete');
          $formErMsgs = $formErMsgs + ' - ' + $fieldErrorDesc + ' <br/>';
        }
        break;
      case "textarea":
        if ($('#' + formID + ' #' + $fieldID).val() === ''){
          $formIsValid = false;
          $fieldLabelError.addClass('incomplete');
          $fieldRowError.addClass('incomplete');
          $formErMsgs = $formErMsgs + ' - ' + $fieldErrorDesc + ' <br/>';
        }
        break;
      case "select-one":
        if ($('#' + formID + ' #' + $fieldID + ' :selected').index() === 0){
          $formIsValid = false;
          $fieldLabelError.addClass('incomplete');
          $fieldRowError.addClass('incomplete');
          $formErMsgs = $formErMsgs + ' - ' + $fieldErrorDesc + ' <br/>';
        }
        break;
      default:
       //nothing
      }
    }
  }

  if (callback && typeof(callback) === "function") {  
    callback($formIsValid,$formErMsgs);
  }

}

function validateEmail(email) {
  var emailVal = email.val();
  if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g, ''); 
    };
  }
  if (emailVal !== '') {
    //return email.search(/.+@.+\..+/);
    emailVal = emailVal.trim();
    email.val(emailVal);
    return emailVal.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
  } else {
    return -1;
  }
}