I’m trying to solve an issue with our Klaviyo embedded sign-up form on our Shopify password page. Currently, it allows users to successfully submit the form even if they only enter blank spaces (e.g., " ", " ") into the ‘First Name’ and ‘Last Name’ fields, leading to messy data.
My goal is to implement a custom JavaScript solution to:
Trim any whitespace from these fields.
Prevent form submission if, after trimming, the fields become empty.
I’ve already written the JavaScript code specifically for this validation.
The unexpected roadblock I’m facing is this: It seems that no custom JavaScript is executing at all on the password page. Even a very simple alert(‘TEST’); or console.log(‘TEST’); placed directly in password.liquid (or theme.liquid) does not run, and the browser console remains blank.
Has anyone encountered this specific challenge with Klaviyo embedded forms (or any forms) where you needed to prevent blank spaces, especially if you ran into issues with JavaScript not executing on the password page? Any advice on either the validation itself or getting JS to run on the password page would be greatly appreciated!
To resolve the issues, start by ensuring your JavaScript runs on the password page by wrapping it in a DOMContentLoaded event listener or using an external JS file (linked in theme.liquid). To prevent users from submitting forms with just spaces in the “First Name” and “Last Name” fields, you can trim the input values using .trim() and block submission if they’re empty with e.preventDefault(). Here’s a quick solution:
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
const firstName = form.querySelector('input[name="first_name"]');
const lastName = form.querySelector('input[name="last_name"]');
firstName.value = firstName.value.trim();
lastName.value = lastName.value.trim();
if (!firstName.value || !lastName.value) {
e.preventDefault();
alert('Please enter a valid name.');
}
});
});
This issue is related to the Klaviyo Form on how it’s working now. The main issue could be the setup of the form in Klaviyo. To ensure that it’s work well you need to ensure these settings.
Make the Form inputs Required so that the customers cannot submit the form without filling it.
Ensure that you should add a validate in the klaviyo so that it submit the form with the supported input text.
By following these steps am sure that your issue could be solve.
Yes — this is a known issue on Shopify password pages: custom JavaScript often doesn’t execute due to how the password page is sandboxed and rendered before full theme assets are loaded.
You’re not alone — many merchants hit this exact wall when trying to:
Run custom JS on the password page
Add tracking scripts or form validation
Use Klaviyo embed codes with interactive behavior
? Why JS isn’t running### 1. Password pages don’t use your full theme- Shopify uses a barebones layout for password pages.
It does not include your theme.liquid layout or full script pipeline unless manually injected.
2. Klaviyo’s embed code loads via iframe or async JS- If you’re using Klaviyo’s hosted embed (e.g., loading via static.klaviyo.com), any
If even console.log(“JS running!”) doesn’t show, then this file isn’t rendering the script block — check browser dev tools to see if it’s being output in the HTML at all.
Option 2: Place validation code inside Klaviyo embed directly
If using the Klaviyo embedded sign-up form, you may have access to custom JS within Klaviyo itself, or at least a way to inject it adjacent to the form.
Go to Klaviyo > Signup Forms > Edit Form
Under “Behaviors” or “Advanced” (depends on form type), look for a way to insert:
If that’s not possible, consider embedding the form as raw HTML instead of loading it from Klaviyo’s CDN — this lets you target and validate fields using your own JS.
Debugging Tips- Confirm JS is output at all: Right-click → “View Page Source” and search for your script.
Avoid theme.liquid on password pages: It won’t be executed unless manually included.
Try inline JS instead of external files: Avoid assets/custom.js — stick to direct in password.liquid.
If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!
Option 2: Place validation code inside Klaviyo embed directly
Debugging Tips- Confirm JS is output at all: Right-click → “View Page Source” and search for your script.