how to add mobile number validation in checkout page

[innois]

Hello,

i want to add javascript / jquery  validation code for mobile number validation,

but i didnt find the checkout.liquid , so i add this js code on my theme.liquid but it dosent work. my checkout page only provide basic phone validation.

so how can i add this ?

below is the code

<script type="text/javascript">

$(document).ready(function() {

$('button').click(function(e) {
if (validatePhone('TextField6')) {
$('#spnPhoneStatus').html('Valid');
$('#spnPhoneStatus').css('color', 'green');
}
else {
alert("Please Enter correct Phone number");
}
});
});

function validatePhone(TextField6) {
var a = document.getElementById(TextField6).value;
var filter = /^(0|91)?[6-9][0-9]{9}$/;
if (filter.test(a)) {
return true;
}
else {
return false;
}
}
</script>

[webwondersco]

@innois , Hope you are doing well.

JFYI, you won't be able to directly modify the checkout.liquid file as it is a restricted file and not accessible for customization.

To add custom validation to your Shopify checkout page, you'll need to use Shopify's Script Editor feature. Here's how you can do it:

- From your Shopify admin, go to "Settings" and then click on "Checkout" in the left sidebar.
- Scroll down to the "Additional scripts" section and click on "Manage checkout scripts."
- In the Script Editor, click on "Add a script" and give your script a name.
- In the code editor, you can write your custom JavaScript/jQuery validation code. Make sure your code targets the specific form fields for mobile number validation.
- Once you have added your validation code, click on "Save" to save your changes.

Please note that the Script Editor feature is available on Shopify Plus and Advanced Shopify plans. If you are on a lower-tier plan, you may need to upgrade your plan or consider using a third-party app for custom checkout modifications.