// JavaScript Document/*===============================================================================================================
Owner: Hill's Pet Nutrition
Title: 3 Bag Challenge Registration Javascript Document
Author: Steve Kiernan
Date: 12/24/09
Disc: This document is responsible for the client-side functionality used during the 3BagChallenge registration
process... (i.e. Form Validation, AJAX, jQuery)
Note(s): The following jQuery Libraries/Plug-ins are REQUIRED...
- jquery-1.3.2.js (or jquery-1.3.2.min.js)
- jquery.form.js (version: 2.36)
- jquery.validate.js (version: 1.5.5)
The javascript calls need to be loaded into the HTML in the following order within the tags.
===============================================================================================================*/
$(document).ready(function() {
var emailParam = $.getUrlVar('email');
if (emailParam) {
//Load the form and append email param (HTML form generated by java)
$("#form_container").load("registerParticipant.do?email="+emailParam, function(){
//Initialize client-side validation
init();
});
}
else {
//Load the form (HTML form generated by java)
$("#form_container").load("registerParticipant.do", function(){
//Initialize client-side validation
init();
});
}
});
function init() {
getUserType();
classimizeInputs();
initValidation();
swfBannerReferer();
//$('#continue').click(function(){
$('#continue').attr('onsubmit', "pageTracker._linkByPost(this);");
//});
}
function getUserType() {
//var userType = $("select#UserType").val();
var userType = $("#userType :selected").val();
showCustomFields(userType);
}
function swfBannerReferer() { //an external media banner can pass parameters to this form, we need to check for the existance of these parameters and populate the form with the value of those parameters
var firstNameParam = $.getUrlVar('fName');
var lastNameParam = $.getUrlVar('lName');
var emailParam = $.getUrlVar('swf_email');
if (firstNameParam) { //if one param exists, assume they will all 3 exist
//insert the external param values into the registration form
$('#firstName').val(firstNameParam);
$('#lastName').val(lastNameParam);
$('#email').val(emailParam);
}
}
function hideCustomFields() {
var items = $("#customFields_container").children("div");
for (i=0; i");
}
$("#schoolName").hide();
},
success: function(data){
//alert("json[array].length = " + data.length);
var selectedSchool = $("select#schoolName").val();
var optElms = "";
for (var i = 0; i < data.length; i++) {
optElms += "";
}
$("#school_loader").removeClass("loading").addClass("loaded");
$("select#schoolName").html(optElms);
if (selectedSchool > 0) {
$("select.#schoolName").val(selectedSchool);
}
$("select#schoolName").show();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);
}
});
}
//==== END: POPULATE SCHOOL SELECTBOX =====================================================//
//==== START: JQUERY VALIDATOR - CUSTOM METHODS =====================================================//
//Valid US phone number
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid US phone number");
//==== END: JQUERY VALIDATOR - CUSTOM METHODS =====================================================//
function showLoaderAnim() {
$("#userProfile").animate({
opacity: 0.4
}, 500 );
$("#form_container").append('
...transmitting data
');
}
function hideLoaderAnim() {
$("#userProfile").animate({
opacity: 1.0
}, 500 );
}
//==== START: INITIALIZE FORM VALIDATION RULES =====================================================//
function initValidation() {
var container = $("div.errorContainer");
var options = {
target: '#form_container',
beforeSubmit: function(){
showLoaderAnim();
},
success: function(){
//hideLoaderAnim();
init();
$("#errorDisplay").css("display", "block");
}
};
var validator = $("#userProfile").validate({
debug: true,
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: "li",
meta: "validate",
rules: {
title: "required",
firstName: "required",
lastName: "required",
address1: "required",
city: "required",
state: "required",
postalCode: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
},
phone: {
required: false,
digits: true,
phoneUS: true
},
userTypeCode: "required",
//////// START: Custom Field(s) Dependancies ////////////
clinicName: {
required: function(element) {
return $("#userType").val() == 31 || $("#userType").val() == 36 || $("#userType").val() == 46;
}
},
schoolCode: {
required: function(element) {
return $("#userType").val() == 21 || $("#userType").val() == 26 || $("#userType").val() == 36 || $("#userType").val() == 41 || $("#userType").val() == 46;
}
},
academicRole: {
required: function(element) {
return $("#userType").val() == 41;
}
},
petSpecialty: {
required: function(element) {
return $("#userType").val() == 41;
}
},
storeName: {
required: function(element) {
return $("#userType").val() == 11 || $("#userType").val() == 12;
}
},
storeType: {
required: function(element) {
return $("#userType").val() == 11 || $("#userType").val() == 12;
}
},
hillsAccountNumber: {
required: false,
digits: true,
minlength: 4,
maxlength: 6
},
//////// END: Custom Field(s) Dependancies ////////////
petType: "required",
email: {
required: true,
email: true
},
confirmEmail: {
required: true,
equalTo: "#email"
},
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
equalTo: "#password"
},
optIn: "required",
overEighteen: "required"
},
messages: {
title: "Please select your Preferred Title",
firstName: "Please enter your First Name",
lastName: "Please enter your Last Name",
address1: "Please enter your Address",
city: "Please enter your City",
state: "Please select your State",
postalCode: {
required: "Please enter your Zip Code",
digits: "Zip Code: Only numeric values between 0-9 are accepted",
minlength: "Zip Code: Please enter at least 5 digits",
maxlength: "Zip Code: Please do not enter more than 5 digits"
},
phone: {
digits: "Phone: Only numeric values between 0-9 are accepted",
phoneUS: "Phone: Please enter a valid US telephone number with no dashes (i.e. 5555555555)"
},
userTypeCode: "Please select your User Type",
clinicName: "Please enter your Clinic Name",
schoolCode: "Please select your School Name",
academicRole: "Please select your Academic Role",
petSpecialty: "Please select your Pet Specialty",
storeName: "Please enter your Store Name",
storeType: "Please select your Store Type",
petType: "Please select the Type of Pets you own",
hillsAccountNumber: {
digits: "Hill's Account Number: Only numeric values between 0-9 are accepted",
minlength: "Hill's Account Number: Please enter at least 4 digits",
maxlength: "Hill's Account Number: Please do not enter more than 6 digits"
},
email: {
required: "Please enter your Email Address",
email: "Your Email Address must be in the format of name@domain.com"
},
confirmEmail: {
required: "Please Confirm Your Email Address",
equalTo: "Your Confirmation Email does not match"
},
password: {
required: "Please enter a Password",
minlength: "Your Password must be at least 6 characters in length"
},
confirmPassword: {
required: "Please Confirm Your Password",
equalTo: "Your Confirmation Password does not match"
},
optIn: "Please choose whether Hill's can contact you via Email",
overEighteen: "Please confirm that you are 18 years or older"
},
showErrors: function() {
$("#errorCount").text(validator.numberOfInvalids() + " error(s) found");
this.defaultShowErrors();
},
invalidHandler: function() {
$("#errorCount").text(validator.numberOfInvalids() + " error(s) found");
},
submitHandler: function(form) {
$("#errorCount").text(validator.numberOfInvalids() + " error(s) found");
$("#userProfile").ajaxSubmit(options);
}
});
$("select").change(function(){
$(this).valid();
});
$("select#userType").change(function(){
var getCurrErrStatus = $("#errorDisplay").attr("style");
var myRegExp = /display: block/;
getCurrErrStatus = getCurrErrStatus.match(myRegExp);
if (getCurrErrStatus != null) {
$("#clinicName").valid();
$("#schoolName").valid();
$("#academicRole").valid();
$("#petSpecialty").valid();
$("#storeName").valid();
$("#storeType").valid();
$("#userProfile").valid();
}
});
}
//==== END: INITIALIZE FORM VALIDATION RULES =====================================================//
function openPopDivIE() {
$("#open_popdiv").click(function() {
$("select").hide();
});
$("#close_popdiv").click(function() {
$("select").show();
});
}
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}, getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
