Join the Voxel Guide Community!

Get Involved

Location Validation for Post Submission

Description/Instructions

This is the first iteration of code to prevent users from creating listings that do not meet our location requirements.  More testing is required! 

This code dynamically checks the input field for a specified location keyword (e.g., “Pennsylvania”) and ensures a switcher is enabled to validate eligibility for post submission.

 Key Features:

  • Validates user input against a specific location (state, city, or region).
  • Toggles a switcher to indicate whether the sign-up meets the location criteria.
  •  Prevents businesses outside the defined market area from proceeding. 

How to Use:

  1. Create LocationValidation.js File in Child Theme
    • Replace “Pennsylvania” in the input validation logic with your desired location.
    • Ensure the input field and switcher elements match the required structure and classes.
  2. Update PHP to Enqueue LocationValidation.js
  3. Add CSS to hide fields
  4. Test and provide feedback

Instructions

  1. Create LocationValidation.js file in Child Theme: voxel-child > js
  2. Copy and Paste code inside LocationValidation.js
  3. Add Switcher Field to your CPT and ensure that it is Required
  4. Change .field-key-pa-switcher in code to match your Switcher Field Key 
    • const switcher = document.querySelector(".field-key-pa-switcher .onoffswitch-checkbox");
  5. Replace "Pennsylvania" in the input validation logic with your desired location.
    • if (inputValue.includes("pennsylvania")) {

 

document.addEventListener("DOMContentLoaded", function () {
const waitForElement = setInterval(function () {
const inputField = document.querySelector(".ts-filter.ts-autocomplete-input");
const switcher = document.querySelector(".field-key-pa-switcher .onoffswitch-checkbox");
const parentContainer = inputField.parentElement; // Get the parent container of the input field
const switcherParent = switcher.closest(".ts-form-group"); // Get the parent container of the switcher

if (inputField && switcher && parentContainer && switcherParent) {
clearInterval(waitForElement); // Stop checking once the elements are found

// Create an error message element
const errorMessage = document.createElement("div");
errorMessage.style.color = "red";
errorMessage.style.fontSize = "12px";
errorMessage.style.position = "absolute";
errorMessage.style.top = `${inputField.offsetHeight + 5}px`; // Place it below the input field
errorMessage.style.left = "0";
errorMessage.style.width = "100%";
errorMessage.style.paddingTop = "5px"; // Add 5px top padding
errorMessage.textContent = "Invalid location: Only Pennsylvania-based businesses are allowed.";
errorMessage.style.display = "none"; // Initially hidden

// Make the parent container relatively positioned for absolute positioning to work
parentContainer.style.position = "relative";
parentContainer.appendChild(errorMessage); // Append the error message

// Set up a periodic check for the input value
setInterval(function () {
const inputValue = inputField.value.toLowerCase();

// Check if the input contains "pennsylvania" (case-insensitive)
if (inputValue.includes("pennsylvania")) {
if (!switcher.checked) {
switcher.checked = true; // Turn on the switcher if not already on
}
errorMessage.style.display = "none"; // Hide the error message
switcherParent.classList.remove("ts-has-errors"); // Remove error class
} else {
if (switcher.checked) {
switcher.checked = false; // Turn off the switcher if not already off
}
errorMessage.style.display = "block"; // Show the error message
switcherParent.classList.add("ts-has-errors"); // Add error class
}
}, 500); // Check every 500ms
}
}, 100); // Check every 100ms for the elements
});

  • JS
Copy Code

Instructions

Modify your PHP code to include the new script:

// Enqueue LocationValidation.js function enqueue_location_validation_script() { wp_enqueue_script( 'location-validation', // Handle for the script get_stylesheet_directory_uri() . '/js/LocationValidation.js', // Path to the JS file in the child theme array('jquery'), // Dependencies filemtime(get_stylesheet_directory() . '/js/LocationValidation.js'), // Version based on file modification time true // Load in footer ); } add_action('wp_enqueue_scripts', 'enqueue_location_validation_script');

  • PHP
Copy Code

Instructions

Add CSS to Create-Post widget to hide the switcher.  Remember to change the field-key-pa-switcher to match your field.

 

We also do not allow users to geolocate their address or pick manually and added the CSS for that as well

.ts-form-group.switcher-label.field-key-pa-switcher {
display: none;
}

.field-key-location > *:not(:first-child) {
display: none;
}

  • CSS
Copy Code

Let's Chat About this Snippet

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24