Shopify: Checkout ajax validations? - ajax

Question

I need to add ajax validations in the checkout page when the users click on the Continue button in each checkout step. Does anyone know if this is possible?
I need to send the Cart object, Address, items, etc. The idea is, the users are unable to continue, if they fail the validation.

Answer 1

You can only do this if you are on Shopify Plus. You cannot inject Javascript into checkout for the very good reason that you'd probably break it! It is a finely tuned machine, so the most you can do usually is change some css classes.

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you have Shopify Plus, then you can insert your js form validation.
Also you have to replace the given input id with you custom id. After which, you can insert, check and get data from input fields
Below is script for phone number validation
$("#checkout_shipping_address_phone").attr("id","checkout_shipping_address_phone_clone");
document.getElementById('checkout_shipping_address_phone_clone').setAttribute('maxlength','10');
document.getElementById('checkout_shipping_address_phone_clone').setAttribute('max-length','10');
// document.getElementById('checkout_shipping_address_phone').setAttribute('type','number');
// document.getElementById('checkout_shipping_address_phone').setAttribute('minlength','10');
// document.getElementById('checkout_shipping_address_phone').setAttribute('data-minlength','10');
let mobileBtn = document.getElementById('checkout_shipping_address_phone_clone');
mobileBtn.removeAttribute('aria-required');
mobileBtn.removeAttribute('data-phone-formatter-country-select');
mobileBtn.removeAttribute('data-phone-formatter');
mobileBtn.removeAttribute('autocomplete');
mobileBtn.setAttribute("onkeypress","return isNumber(event)");
mobileBtn.type='text';
console.log("aaa");
function isNumber(evt){
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
$("body").on("click","#continue_button",function(){
var hh = $('#checkout_shipping_address_phone_clone').val();
if(hh.length==10){
console.log('dbcjhsdvjhdsvhjsjh');
$("#error_msgehh").remove();
$('#continue_button').attr('type','submit');
$('#continue_button').css('opacity','1');
}
else{
console.log(hh.length);
$('#continue_button').css('opacity','.5');
$("#error_msgehh").remove();
$('#checkout_shipping_address_phone_clone').parent().after().append('<p id="error_msgehh" style="color:red;">Enter 10 Digit Phone Number</p>');
$('#continue_button').attr('type','button');
}
});
$('#checkout_shipping_address_phone_clone').attr('maxlength','10');
$('#checkout_shipping_address_phone_clone').attr('max-length','10');
$("body").on("keyup mouseenter mouseleave","#checkout_shipping_address_phone_clone",function(){
var hh = $(this).val();
const regexExp = /^[6-9]$/gi;
let firstChar = regexExp.test(hh[0]); // dont allow 0,1,2,3,4,5 digits at first place
if(!firstChar){
var v ='';
$('#checkout_shipping_address_phone_clone').val(v);
}
});
$("body").on("keyup mouseenter mouseleave",".field__input-wrapper input",function(){
var hh = $('#checkout_shipping_address_phone_clone').val();
console.log('hover');
const regexExp = /^[6-9]$/gi;
let firstChar = regexExp.test(hh[0]); // dont allow 0,1,2,3,4,5 digits at first place
if(!firstChar){
var v ='';
$('#checkout_shipping_address_phone_clone').val(v);
}
});
// console.log("bbbaaa");
// });