javascript - Shopify validation for custom attribute fields in cart page

Solution:

I figured out the issue here

I changed the checkout button from type="submit" to type="button" and changed the name attribute of checkout button to "checkout1". I'm not sure how these things affecting the form submission, but i had to do these.

Then I commented out these default form submission code in the cart page footer file:

document.querySelector('#checkout').addEventListener('click', function(event) {
   document.querySelector('#cart').submit();
 });
Copy code

Also implemented the below validation code in custom js file:

document.querySelector('#checkout').addEventListener('click', function(event) {
  event.preventDefault();
   let errors = 0; 
document.querySelectorAll('input.required').forEach((input) => {
  let val = input.value;
   console.info(val.length);
  if(val.length == 0){ 
       errors = errors + 1;
   }
});

if(errors > 0){
  alert("Please fill all the required fields.");
    return false;
}
else if(!document.querySelector('#disclmr-chk').checked) {
      alert("Please check the checkbox.");
      return false;
    }else{
document.querySelector('#checkout').setAttribute('name', 'checkout');
document.querySelector('form#cart').submit(); }});
Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.