Last active
February 18, 2020 15:31
-
-
Save leowebguy/04b3c6a0cd8070ccc6fb66ca696718a6 to your computer and use it in GitHub Desktop.
jquery validation (18+, february months, zip code...) + bootstrap dialog + ajax on submitHandler
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
function submitForm() { | |
$('form[name=registration]').submit(); | |
}; | |
function DialogThanks() { | |
BootstrapDialog.show({ | |
title: ' ', | |
message: '<h1>Thank You</h1><p>You’re now enrolled. Thanks!</p>', | |
buttons: [{ | |
label: 'Close', | |
cssClass: 'btn btn-default inline-block', | |
action: function(dialog){ | |
dialog.close(); | |
window.location = "../index.html"; | |
} | |
}] | |
}); | |
} | |
$("form[name=registration]").validate({ | |
errorElement: "span", | |
errorClass: "has-error", | |
submitHandler: function (form) { | |
var frm = $('form[name=registration]').serializeArray(); | |
var dataToSend = {}; | |
$.each(frm, function(i,v) { | |
dataToSend[v.name] = v.value | |
}); | |
$.ajax({ | |
type: "POST", | |
url: "../process.php", | |
data: dataToSend, | |
success: function(html) { | |
setTimeout(function() { | |
DialogThanks(); | |
}, 200); | |
}, | |
dataType: "html" | |
}); | |
}, | |
groups: { | |
dob: "dobMonth dobDay dobYear", | |
phone: "telOne telTwo telThree", | |
}, | |
rules: { | |
dobMonth: { | |
required: true, | |
digits: true, | |
maxlength: 2, | |
range: [1, 12], | |
eighteenOrOlder: true, | |
febdate: true | |
}, | |
dobDay: { | |
required: true, | |
digits: true, | |
maxlength: 2, | |
range: [1, 31], | |
eighteenOrOlder: true, | |
febdate: true | |
}, | |
dobYear: { | |
required: true, | |
digits: true, | |
maxlength: 4, | |
range: [1900, 2014], | |
eighteenOrOlder: true, | |
febdate: true | |
}, | |
firstName: { | |
required: true, | |
minlength: 2 | |
}, | |
lastName: { | |
required: true, | |
minlength: 2 | |
}, | |
addressOne: { | |
required: true, | |
minlength: 5 | |
}, | |
city: { | |
required: true, | |
minlength: 3 | |
}, | |
zip: { | |
required: true, | |
digits: true, | |
zipcodeUS: true, | |
minlength: 5, | |
maxlength: 5 | |
}, | |
state: { | |
required: true | |
}, | |
email: { | |
required: true, | |
email: true | |
//onkeyup: true | |
} | |
}, | |
messages: { | |
dobMonth: { | |
required: "A month of birth is required.", | |
digits: "Month of birth must be numeric." | |
}, | |
dobDay: { | |
required: "A day of birth is required.", | |
digits: "Day of birth must be numeric." | |
}, | |
dobYear: { | |
required: "A date of birth is required.", | |
digits: "Year of birth must be numeric." | |
}, | |
firstName: { | |
required: "A first name is required.", | |
minlength: "First name must be at least 2 characters in length." | |
}, | |
lastName: { | |
required: "A last name is required.", | |
minlength: "Last name must be at least 2 characters in length." | |
}, | |
addressOne: { | |
required: "An address is required.", | |
minlength: "Address must be at least 5 characters in length." | |
}, | |
city: { | |
required: "A city is required.", | |
minlength: "City must be at least 2 characters in length." | |
}, | |
zip: { | |
required: "A ZIP code is required.", | |
digits: "Zip code must be numeric.", | |
minlength: "Zip code must be 5 characters in length." | |
}, | |
state: { | |
required: "A state is required." | |
}, | |
email: { | |
required: "An e-mail address is required.", | |
email: "Please enter a valid e-mail address." | |
} | |
}, | |
errorPlacement: function(err, el) { | |
el.parents('.field').children('.error').html(err); | |
} | |
}); | |
$.validator.addMethod("eighteenOrOlder", function() { | |
var month = $('select[name="dobMonth"]').val(); | |
var day = $('input[name="dobDay"]').val(); | |
var year = $('input[name="dobYear"]').val(); | |
//var age = 18; | |
var mydate = new Date(); | |
mydate.setFullYear(year, month-1, day); | |
var currdate = new Date(); | |
currdate.setFullYear(currdate.getFullYear() - 18); | |
return currdate > mydate; | |
}, "You must be over 18 to be eligible to participate."); | |
/* | |
$.validator.addMethod("phoneUS", function(v, el) { | |
v = v.replace(/\s+/g, ""); | |
return this.optional(el) || v.length > 9 && v.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); | |
}, "Please specify a valid phone number"); | |
*/ | |
$.validator.addMethod("zipcodeUS", function(v, el) { | |
return this.optional(el) || /\d{5}-\d{4}$|^\d{5}$/.test(v); | |
}, "The specified US ZIP Code is invalid"); | |
$.validator.addMethod("febdate", function() { | |
var month = $('select[name="dobMonth"]').val(); | |
var day = $('input[name="dobDay"]').val(); | |
var year = $('input[name="dobYear"]').val(); | |
if ((month==4 || month==6 || month==9 || month==11) && day ==31) | |
return false; | |
else if (month == 2) { | |
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); | |
if (day> 29 || (day ==29 && !isleap)) | |
return false; | |
} | |
return true; | |
}, "A valid date is required."); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment