upskill-event-manager/assets/js/hvac-registration.backup.js
Ben Reed cdc5ea85f4 feat: Add comprehensive CSS, JavaScript and theme asset infrastructure
Add massive collection of CSS, JavaScript and theme assets that were previously excluded:

**CSS Files (681 total):**
- HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup
- Theme framework files (Astra, builder systems, layouts): 200+ files
- Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files
- WordPress core and editor styles: 50+ files
- Responsive and RTL language support: 200+ files

**JavaScript Files (400+ total):**
- HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations
- Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope
- Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS
- WordPress core functionality: customizer, admin, block editor compatibility
- Third-party integrations: Stripe, SMTP, analytics, search functionality

**Assets:**
- Certificate background images and logos
- Comprehensive theme styling infrastructure
- Mobile-responsive design systems
- Cross-browser compatibility assets
- Performance-optimized minified versions

**Updated .gitignore:**
- Fixed asset directory whitelisting patterns to properly include CSS/JS/images
- Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.)
- Maintains security by excluding sensitive files while including essential assets

This commit provides the complete frontend infrastructure needed for:
- Full theme functionality and styling
- Plugin feature implementations
- Mobile responsiveness and accessibility
- Cross-browser compatibility
- Performance optimization
- Developer workflow support
2025-08-11 16:20:31 -03:00

282 lines
No EOL
11 KiB
JavaScript

jQuery(document).ready(function($) {
const $countrySelect = $('#user_country');
const $stateSelect = $('#user_state');
const $stateOtherInput = $('#user_state_other');
const $registrationForm = $('#hvac-registration-form');
// Form validation helpers
function showFieldError(fieldId, message) {
const $field = $('#' + fieldId);
const $existingError = $field.siblings('.error-message');
if ($existingError.length) {
$existingError.text(message);
} else {
$field.after('<p class="error-message" id="' + fieldId + '_error">' + message + '</p>');
}
$field.addClass('error');
}
function clearFieldError(fieldId) {
const $field = $('#' + fieldId);
$field.siblings('.error-message').remove();
$field.removeClass('error');
}
// Real-time email validation
$('#user_email').on('blur', function() {
const email = $(this).val();
if (email && !isValidEmail(email)) {
showFieldError('user_email', 'Please enter a valid email address.');
} else {
clearFieldError('user_email');
}
});
$('#business_email').on('blur', function() {
const email = $(this).val();
if (email && !isValidEmail(email)) {
showFieldError('business_email', 'Please enter a valid business email address.');
} else {
clearFieldError('business_email');
}
});
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
// Real-time password validation
$('#user_pass').on('input blur', function() {
const password = $(this).val();
if (password) {
const errors = [];
if (password.length < 8) {
errors.push('at least 8 characters');
}
if (!/[A-Z]/.test(password)) {
errors.push('one uppercase letter');
}
if (!/[a-z]/.test(password)) {
errors.push('one lowercase letter');
}
if (!/[0-9]/.test(password)) {
errors.push('one number');
}
if (errors.length > 0) {
showFieldError('user_pass', 'Password must contain ' + errors.join(', ') + '.');
} else {
clearFieldError('user_pass');
// Check confirm password if it has a value
const confirmPass = $('#confirm_password').val();
if (confirmPass) {
$('#confirm_password').trigger('blur');
}
}
}
});
// Confirm password validation
$('#confirm_password').on('blur', function() {
const password = $('#user_pass').val();
const confirmPassword = $(this).val();
if (confirmPassword && password !== confirmPassword) {
showFieldError('confirm_password', 'Passwords do not match.');
} else {
clearFieldError('confirm_password');
}
});
// URL validation for optional fields
function isValidURL(url) {
try {
new URL(url);
return true;
} catch (_) {
return false;
}
}
$('#user_url, #user_linkedin, #business_website').on('blur', function() {
const url = $(this).val();
const fieldId = $(this).attr('id');
if (url && !isValidURL(url)) {
const fieldName = fieldId === 'user_url' ? 'personal website' :
fieldId === 'user_linkedin' ? 'LinkedIn profile' :
'business website';
showFieldError(fieldId, 'Please enter a valid URL for your ' + fieldName + '.');
} else {
clearFieldError(fieldId);
}
});
// Form submission validation
$registrationForm.on('submit', function(e) {
let hasErrors = false;
const errors = [];
// Check required fields
const requiredFields = [
{ id: 'user_email', name: 'Email' },
{ id: 'user_pass', name: 'Password' },
{ id: 'confirm_password', name: 'Confirm Password' },
{ id: 'first_name', name: 'First Name' },
{ id: 'last_name', name: 'Last Name' },
{ id: 'display_name', name: 'Display Name' },
{ id: 'description', name: 'Biographical Info' },
{ id: 'business_name', name: 'Business Name' },
{ id: 'business_phone', name: 'Business Phone' },
{ id: 'business_email', name: 'Business Email' },
{ id: 'business_description', name: 'Business Description' },
{ id: 'user_country', name: 'Country' },
{ id: 'user_city', name: 'City' },
{ id: 'user_zip', name: 'Zip/Postal Code' },
{ id: 'application_details', name: 'Application Details' }
];
requiredFields.forEach(field => {
const $field = $('#' + field.id);
if (!$field.val() || $field.val().trim() === '') {
hasErrors = true;
errors.push(field.name + ' is required.');
showFieldError(field.id, field.name + ' is required.');
}
});
// Check state/province
const country = $('#user_country').val();
if (country) {
if (country === 'United States' || country === 'Canada') {
const state = $('#user_state').val();
if (!state || state === '') {
hasErrors = true;
errors.push('State/Province is required.');
showFieldError('user_state', 'State/Province is required.');
}
} else {
const otherState = $('#user_state_other').val();
if (!otherState || otherState.trim() === '') {
hasErrors = true;
errors.push('State/Province is required.');
showFieldError('user_state_other', 'State/Province is required.');
}
}
}
// Check radio buttons
if (!$('input[name="create_venue"]:checked').length) {
hasErrors = true;
errors.push('Please select whether to create a training venue profile.');
}
if (!$('input[name="business_type"]:checked').length) {
hasErrors = true;
errors.push('Business Type is required.');
}
// Check checkbox groups
const checkboxGroups = [
{ name: 'training_audience[]', label: 'Training Audience' },
{ name: 'training_formats[]', label: 'Training Formats' },
{ name: 'training_locations[]', label: 'Training Locations' },
{ name: 'training_resources[]', label: 'Training Resources' }
];
checkboxGroups.forEach(group => {
if (!$('input[name="' + group.name + '"]:checked').length) {
hasErrors = true;
errors.push('Please select at least one option for ' + group.label + '.');
}
});
if (hasErrors) {
e.preventDefault();
// Show error summary at the top
let $errorSummary = $('.hvac-form-errors');
if (!$errorSummary.length) {
$errorSummary = $('<div class="hvac-form-errors" role="alert"><h3>Please correct the following errors:</h3><ul></ul></div>');
$registrationForm.prepend($errorSummary);
}
const $errorList = $errorSummary.find('ul');
$errorList.empty();
errors.forEach(error => {
$errorList.append('<li>' + error + '</li>');
});
// Scroll to top of form
$('html, body').animate({
scrollTop: $('.hvac-registration-form').offset().top - 100
}, 500);
}
});
// Function to populate states/provinces
function loadStates(country) {
console.log(`Loading states/provinces for ${country}`); // Keep log for debugging
$stateSelect.find('option').not('[value=""],[value="Other"]').remove(); // Clear existing options except defaults
let options = {};
if (country === 'United States' && typeof hvacRegistrationData !== 'undefined' && hvacRegistrationData.states) {
options = hvacRegistrationData.states;
} else if (country === 'Canada' && typeof hvacRegistrationData !== 'undefined' && hvacRegistrationData.provinces) {
options = hvacRegistrationData.provinces;
} else {
// If country is not US/CA or data is missing, ensure 'Other' is selected and input shown
$stateSelect.val('Other').trigger('change'); // Trigger change to show 'Other' input if needed
return;
}
// Append new options
$.each(options, function(value, label) {
// Append before the 'Other' option if it exists, otherwise just append
const $otherOption = $stateSelect.find('option[value="Other"]');
const $newOption = $('<option></option>').val(value).text(label);
if ($otherOption.length > 0) {
$newOption.insertBefore($otherOption);
} else {
$stateSelect.append($newOption);
}
});
// Ensure the 'Other' input is hidden initially when states/provinces are loaded
$stateOtherInput.hide().val('');
// Reset state selection to default prompt
$stateSelect.val('');
}
// Handle state/province field visibility based on 'Other' selection
$stateSelect.change(function() {
if ($(this).val() === 'Other') {
$stateOtherInput.show().prop('required', true); // Make required if Other is selected
} else {
$stateOtherInput.hide().val('').prop('required', false); // Hide and make not required
}
}).trigger('change'); // Trigger on load to set initial visibility
// Handle country change to show/hide/populate state field
$countrySelect.change(function() {
const country = $(this).val();
if (country === 'United States' || country === 'Canada') {
loadStates(country);
$stateSelect.show().prop('required', true); // Show and require state select
$stateOtherInput.prop('required', false); // Ensure 'Other' input is not required initially
} else if (country) {
// For other countries, hide state select, select 'Other', show/require 'Other' input
$stateSelect.hide().val('Other').prop('required', false); // Hide and make not required
$stateOtherInput.show().prop('required', true); // Show and require 'Other' input
} else {
// No country selected
$stateSelect.hide().val('').prop('required', false); // Hide and make not required
$stateOtherInput.hide().val('').prop('required', false); // Hide and make not required
}
}).trigger('change'); // Trigger on load to set initial state based on pre-selected country (if any)
});