I am attempting to make a delivery date picker on my cart page. This will be a required field since we take a lot fo future orders. I have added the deliver date picker and edited the code to make it required which seems to work and points out that the field is not yet filled in but then continues to the submit the form and go to checkout anyways. My delivery date snippet code is below. Can someone please tell me what I have done wrong? Thank you in advance.
Unfortunately adding the “required” attribute to the input isn’t always enough to stop the form submission. You’ll need a custom event listener to intercept the form submission. Something like this:
document.body.addEventListener("submit", function (e) {
if (e.target.getAttribute("action") === "/cart") {
if (document.querySelector('#date').value === "") {
e.preventDefault();
e.stopPropagation();
alert("Please select a delivery date");
return false;
}
}
});
This is how we’re handling this in our delivery date app Bloom.
I implemented your solution, but it didn’t work yet. Below is my post on the exactly same issue I’m trying to fix. Could you please check what is wrong with the custom code on the cart page. My post has all the details you need. Below is your code that I modified to match the element in our page.
// Test click handler on checkout button.
document.body.addEventListener("submit", (e)=>{
alert("Submit clicked");
if (e.target.getAttribute("action") === "/cart") {
if ((document.querySelector('#personal').value === "") || (document.querySelector('#business').value === "")) {
e.preventDefault();
e.stopPropagation();
alert("Please select your order type");
return false;
}
}
});