desirelabs
9/17/2015 - 7:51 PM

validate

validate

"use strict";
var mailregexp = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/);
var ev = "click";
if ( isTouchDevice() ) {
    ev = "touchstart";
}
var $ = jQuery.noConflict();


$(document).ready(function() {
    if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
        createTooltip();
    }
    createPagination();
    createDatepicker();
    focusOnError();
        
    /* Add "*" to mandatory fields's label */
    $('[required]').closest('.form-group, .control-group').find('.control-label').append(' *');
    $('.radio-label').each(function() {
        if ( $(this).find('.visible-xs').text() !== "N/C" ) {
            $(this).find('.visible-xs').text($(this).find('.hidden-xs').text());
        }
    });
    
    var errors = [];
    $('#form .submit').on(ev, function(e) {
        e.preventDefault();
        $('input, textarea').each(function() {
            validateInput($(this), errors);
        });
        console.log(errors);
        if( errors.length === 0 ) {
            $('#form').submit();
        }
    });
    $('[type="text"], [type="date"], textarea, [type="email"], [type="radio"]').on('change', function() {
        validateInput($(this));
    });
});

function validateInput(inputObject, errors) {
    var validationError = getValidationErrorMessage(inputObject);
    if ( !isEmpty(validationError) ) {
        if ( $.inArray( inputObject.attr('name'), errors ) === -1 )
            errors.push(inputObject.attr('name'));
        addError(inputObject, getMessage(validationError));
        focusOnError();
    } else {
        if ( $.inArray( inputObject.attr('name'), errors ) !== -1 )
            errors.splice( inputObject.attr('name'), 1 );
        removeError(inputObject);
    }
}

function getValidationErrorMessage(inputObj) {
    var value = null;
    var required = null;
    var pattern = null;
    var inputType = inputObj.attr('type');

    if ( $.trim(inputObj.val()).length ) {
        value = inputObj.val();
    } else {
        value = false;
    }
        
    if ( inputObj.attr('required') ) {
        required = true;
    } else {
        required = false;
    }
        
    if ( inputObj.attr('pattern') )  {
        pattern = new RegExp( inputObj.attr('pattern') );
    } else if ( inputType === "email" ) {
        pattern = mailregexp;
    } else  {
        pattern = false;
    }

    var message = '';
    
    if ( required && inputType === "radio" && inputObj.prop('checked') === false ) {
        var checked = false;
        var parent = inputObj.closest('.control-radio');
        var siblings = parent.find('input[type="radio"]');
        siblings.each(function(){
            if ( $(this).prop('checked') === true ) {
                checked = true;
                return;
            }
            if ( checked !== true ) {
                message = 'required';
            }
        });
    } else if ( required === true && value === false && inputType !== "radio") {
        message = 'required';
    }
    else if ( pattern !== false && value !== false && !value.match(pattern) )  {
        message = 'pattern';
    }
    else {
        message = '';
    }

    return message;
}

function getMessage(validationError) {
    var errorMessage = '';
    switch(validationError.toLowerCase()) {
        case 'required':
            errorMessage = 'Champ requis';
            break;
        case 'pattern':
            errorMessage = 'Format du champ invalide';
            break;
        default:
            errorMessage = 'Erreur de saisie';
            break;
    }
    return errorMessage;
}

function addError(inputObject, errorMessage) {
    var inputType = inputObject.attr('type');
    inputObject.addClass('has-error');

    if ( inputType === 'radio' ) {
        if ( inputObject.closest('.control-radio').find('.help-block.with-errors').length === 0 ) {
            inputObject.closest('.control-radio').prepend("<span class=\"help-block with-errors\">" + errorMessage + "</span>");
        }
    } else {
        if ( inputObject.next('.help-block.with-errors').length === 0 ) {
            inputObject.after("<span class=\"help-block with-errors\">" + errorMessage + "</span>");
        } else {
            inputObject.next('.help-block.with-errors').text(errorMessage);
        }        
    }
}

function removeError(inputObject) {
    var inputType = inputObject.attr('type');
    inputObject.removeClass('has-error');

    if ( inputType === 'radio') {
        if ( inputObject.closest('.control-radio').find('.help-block.with-errors').length !== 0 ) {
            inputObject.closest('.control-radio').find('.help-block.with-errors').remove();
        }
    } else {
        if ( inputObject.next('.help-block.with-errors') ) {
            inputObject.next('.help-block.with-errors').remove();
        } else {
            console.log("do something valid again");
        }
    }
}

function isEmpty(str) {
    return (!str || 0 === str.length);
}

/**
* Brings to the first error on validation
*/
function focusOnError() {
var pageToShow = null;
    if ( $('.help-block.with-errors').length !== 0 ) {
        var offset = $('.help-block.with-errors').closest('.page > div').offset();
        var top = offset.top;
        $("html, body").animate({
            scrollTop: top
        }, 150);
    }
}

/**
* Detect touch device
*/
function isTouchDevice() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

/**
* Generate and handles pagination
*/
function createPagination() {
    var page = $('.page');
    var next = $('button.next');
    var prev = $('button.prev');
    var last = $('.page').last();
    var ev = "click";
    if ( isTouchDevice() ) {
        ev = "touchstart";
    }
    next.on(ev, function(e){
        e.preventDefault();
        var parent = $(this).closest(page);
        var nextPage = parent.next(page);
        if (nextPage) {
            $(nextPage).show();
            $(parent).hide();
            if ( nextPage.is(last) ) {
                $('.description_plus').hide();
            }
            $("html, body").animate({
                scrollTop: 0
            }, 150);
        }
    });
    prev.on(ev, function(e){
        e.preventDefault();
        var parent = $(this).closest(page);
        var prevPage = parent.prev(page);
        if (prevPage) {
            $(prevPage).show();
            $(parent).hide();
            $('.description_plus').show();
            $("html, body").animate({
                scrollTop: 0
            }, 150);
        }
    });
}

function createTooltip() {
    $('[data-toggle="tooltip"]').tooltip(); 
}

function createDatepicker() {
    if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
        $('.date > input').attr('type', 'text');
        $('.date > input').datetimepicker({
            locale: "fr",
            format: "DD/MM/YYYY"
        }).on('dp.change', function(){ 
            validateInput($(this));
        });
    }
}