Last active
December 28, 2015 18:09
-
-
Save blocksector/7541266 to your computer and use it in GitHub Desktop.
jquery validation
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
var form = $('.application-form'), | |
requiredFields = $('.required', form), | |
email_pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/, | |
key_range = /4[8-9]|5[0-7]|45|32|13/, | |
topmost_error = $('.application-form-placeholder').offset().top; | |
has_error = true, | |
$('#applicant-birthdate').datepicker({ | |
changeMonth: true, | |
changeYear: true, | |
showOtherMonths: true | |
}); | |
$('.number', form).on('keypress', function(e) { | |
if (!key_range.test(e.keyCode)) { | |
return false; | |
} | |
}); | |
form.submit(function(e) { | |
$('.error', form).removeClass('error'); | |
$('.error-message', form).empty(); | |
has_empty = has_empty_fields(requiredFields.filter('[type=text], .multi-input')); | |
valid_email = is_email_valid(requiredFields.filter('[name=email-contact]')); | |
has_error = has_empty || !valid_email; | |
if (has_error || !is_certified() || !is_read()) { | |
$(window).scrollTop(topmost_error); | |
e.preventDefault(); | |
} | |
}); | |
function has_empty_fields(list_of_required_fields) { | |
// check if form has empty textfields | |
// initialize empty text field array holder | |
var empty_fields; | |
// check each text field | |
$.each(list_of_required_fields, function(i, el) { | |
if ($(el).is('input')) { | |
// do this if element is a textfield | |
// get value of the textfield | |
var field = $(el), | |
field_value = field.val(); | |
// verify if the content of the textfield is empty | |
if (field_value == "" || field_value == null || !field_value) { | |
// if empty push element to array holder | |
field.addClass('error'); | |
} | |
} else { | |
// else assume checkbox/radio | |
var field = $('input', el); | |
// check if checked | |
if (!is_checked(field)) { | |
$(el).addClass('error'); | |
} | |
} | |
}); | |
// get erronoues fields | |
empty_fields = list_of_required_fields.filter('.error'); | |
// display error if there is an empty field | |
if (empty_fields.length) { | |
$('.error-message', form).append($("<p/>").text("* fields in boxes are required")); | |
} | |
return !!empty_fields.length; | |
} | |
function is_email_valid(email_field) { | |
// this function will validate format of email address | |
var field = $(email_field), | |
field_value = field.val(), | |
blank_field_value = (!field_value || field_value == "" || field_value == null), | |
email_correct_format = email_pattern.test(field_value); | |
if (!blank_field_value && !email_correct_format) { | |
email_field.addClass('error'); | |
$('.error-message', form).append($("<p/>").text("* not a valid email address format")); | |
} | |
return email_correct_format; | |
} | |
function is_checked(el) { | |
var checked = $(el).is(':checked') | |
if (!checked) { | |
$(el).parents("label").addClass('error'); | |
} | |
return checked; | |
} | |
function is_certified() { | |
var certified = is_checked('#certify'); | |
if (!certified) $('.error-message', form).append($("<p/>").text("* you must certify that the information stated are true and correct")); | |
return certified; | |
} | |
function is_read() { | |
var read = is_checked('#agree'); | |
if (!read) $('.error-message', form).append($("<p/>").text("* you must agree with the terms and condition")); | |
return read; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment