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));
});
}
}