How to prevent form submission for some validations

Forum|Forum|2 years ago
July 8, 2024
5 replies
166 views

Hi,

I’m developer, and I need to prevent form submission, then do some stuff, and if some conditons are well then submit the form. How I can prevent the form submission vis JS?

I’m trying to addEventListener and using e.preventDefault and e.stopPropagation but i can’t stop the submit. This is my code:

let form = document.querySelector(".klaviyo-form form");
form.addEventListener('submit', stop_submit);

function stop_submit(e){
    e.preventDefault();
    e.stopPropagation();
}

How i can have the controll of submissions?

Thanks

Sign-up forms

This topic has been closed for replies.

Best answer by Kim Strauch

@xabi, I don’t think this is possible. You can add validation within the klaviyo form in Klaviyo’s UI or you can create a custom form using our client subscribe api (https://developers.klaviyo.com/en/reference/create_client_subscription), where you have full control over the validation.

You can listen for form submissions (as described in this guide https://developers.klaviyo.com/en/docs/track_klaviyo_form_activity_using_javascript), but I don’t think it’s currently possible to block these submissions as you’re trying to do.

M

Maxbuzz

Partner

Hello @xabi

Try using this code:

let myKlaviyoform = document.querySelector("form.klaviyo-form");
myKlaviyoform.addEventListener("submit", function(event) {
event.preventDefault();
}

https://theforms.pro

X

xabiAuthor

Contributor III

Hello @Maxbuzz, it doesn't work for me. Klaviyo keep sending the form.

Kim StrauchAnswer

Klaviyo Employee

@xabi, I don’t think this is possible. You can add validation within the klaviyo form in Klaviyo’s UI or you can create a custom form using our client subscribe api (https://developers.klaviyo.com/en/reference/create_client_subscription), where you have full control over the validation.

You can listen for form submissions (as described in this guide https://developers.klaviyo.com/en/docs/track_klaviyo_form_activity_using_javascript), but I don’t think it’s currently possible to block these submissions as you’re trying to do.

M

Maxbuzz

Partner

Hello @xabi Since Klaviyo Forms does not use Submit events, the only way to check this is if the button is clicked and there are not errors in the form submission.

If you want to do other operations when the form is submitting you can use this code. This won’t prevent the form submission but you can perform any other operation along with the submission.

function checkElementExists(selector, callback) {
const element = document.querySelector(selector);

if (element) {
console.log(`Element ${selector} found immediately`);
callback(element);
} else {
console.log(`Element ${selector} not found. Starting observer...`);
watchForElement(selector, callback);
}
}

function watchForElement(selector, callback) {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === "childList") {
const element = document.querySelector(selector);
if (element) {
console.log(`Element ${selector} found after watching`);
observer.disconnect();
callback(element);
return;
}
}
}
});

observer.observe(document.body, {
childList: true,
subtree: true,
});
}

// Example usage
function elementFound(element) {
console.log("Element found:", element);
let klaviyoForm = document.querySelector("form.klaviyo-form");

const subscribeButton = document.querySelector(".go3894874857"); // this is class for button

// Check if the form and button are available
if (klaviyoForm && subscribeButton) {
// Add an event listener to the form's button
subscribeButton.addEventListener("click", function (event) {
// Prevent the default button action

event.preventDefault();
const ErrorButtonDiv = document.querySelector(".go3298969293"); // this is the class of errors like this field is required
if (!ErrorButtonDiv) {
// Log the message to the console
console.log("Form is now submitted"); // perform your action when there is no error and form button is clicked
}
});
}
}

// Call this function to start checking/watching for an element
checkElementExists("form.klaviyo-form", elementFound);

https://theforms.pro

X

xabiAuthor

Contributor III

Thanks @Kim Strauch and @Maxbuzz for your answers. Finally I created a custom form and use klaviyo API for profile creation and all stuffs.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials