Last active
October 11, 2017 08:08
-
-
Save alpipego/15ed04acfb0289a388f08903d54b607a to your computer and use it in GitHub Desktop.
jQuery Formvalidation Script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Created by alpipego on 04.12.2016. | |
*/ | |
jQuery(document).ready(function ($) { | |
var data = { | |
isValid: false, | |
errors: [] | |
}; | |
window.formDataIsValid = false; | |
$('form').on('submit', data, function (e) { | |
var $form = $(this); | |
if (e.data === 'undefined' || !e.data.isValid) { | |
e.preventDefault(); | |
data.isValid = true; | |
$form.find('input, textarea, select').each(function () { | |
var $input = $(this); | |
if ($input.attr('required') && !$input.attr('pattern')) { | |
if ($.trim($input.val()) === '' || !$.trim($input.val())) { | |
data.isValid = false; | |
if (data.errors.indexOf($input.attr('id')) < 0) { | |
data.errors.push($input.attr('id')); | |
} | |
} else { | |
if (data.errors.indexOf($input.attr('id')) >= 0) { | |
data.errors.splice(data.errors.indexOf($input.attr('id')), 1); | |
} | |
// validate email | |
if ($input.attr('type') === 'email' && $.trim($input.val()) !== '') { | |
if (!/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i.test($input.val())) { | |
data.isValid = false; | |
data.errors.push($input.attr('id')); | |
} else { | |
if (data.errors.indexOf($input.attr('id')) >= 0) { | |
data.errors.splice(data.errors.indexOf($input.attr('id')), 1); | |
} | |
} | |
} | |
} | |
// checkboxes | |
if ($input.attr('type') === 'checkbox' && !$input.is(':checked')) { | |
data.isValid = false; | |
data.errors.push($input.attr('id')); | |
} | |
} | |
if ($input.attr('pattern')) { | |
if ($.trim($input.val()).search($input.attr('pattern')) < 0) { | |
data.isValid = false; | |
var err = [$input.attr('id'), 'popup']; | |
if (data.errors.length === 0) { | |
data.errors.push(err); | |
} | |
$.each(data.errors, function (i, value) { | |
if ($(value).not([$input.attr('id'), 'popup']).get().length !== 0) { | |
data.errors.push(err); | |
} | |
}); | |
} | |
} | |
}); | |
console.log(data); | |
var $response = $('#response'); | |
if (data.isValid) { | |
if ($form.children('#response').length > 0) { | |
$response.empty().removeClass(); | |
} else { | |
$form.prepend($('<div>').attr('id', 'response')); | |
} | |
window.formDataIsValid = true; | |
} else { | |
$.when(function () { | |
if ($form.children('#response').length === 0) { | |
$form.prepend($('<div>').attr('id', 'response').addClass('error')); | |
} else { | |
$response.empty().removeClass().addClass('error'); | |
} | |
$response.text(window.errormsg.required); | |
}) | |
.then(function () { | |
if (data.errors.length === 1 && data.errors[0] === 'email' && $.trim($form.find('[type="email"]').val()) !== '') { | |
$response.text(window.errormsg.email); | |
} | |
if (data.errors.length === 1 && $.isArray(data.errors[0])) { | |
$response.empty().removeClass(); | |
} | |
}); | |
$.each(data.errors, function (index, value) { | |
var popup = false; | |
if ($.isArray(value)) { | |
popup = true; | |
value = value[0]; | |
} | |
var $input = $form.find('#' + value); | |
if (popup) { | |
$input.after($('<div>').addClass('is-popup').text($input.data('error-message'))); | |
} | |
$input.addClass('is-error'); | |
$input.on('blur', function () { | |
if ($.trim($(this).val()) !== '') { | |
$(this).removeClass('is-error'); | |
} | |
}); | |
if ($input.attr('type') === 'checkbox') { | |
$input.on('change', function () { | |
if ($(this).is(':checked')) { | |
$(this).removeClass('is-error'); | |
} | |
}); | |
} | |
}); | |
$('html, body').animate({ | |
scrollTop: $('#' + data.errors[0]).offset().top - 100 | |
}, 400); | |
} | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment