Skip to content

Instantly share code, notes, and snippets.

@leowebguy
Last active February 18, 2020 15:31
Show Gist options
  • Save leowebguy/04b3c6a0cd8070ccc6fb66ca696718a6 to your computer and use it in GitHub Desktop.
Save leowebguy/04b3c6a0cd8070ccc6fb66ca696718a6 to your computer and use it in GitHub Desktop.
jquery validation (18+, february months, zip code...) + bootstrap dialog + ajax on submitHandler
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