Skip to main content
All CollectionsAdvanced HelpIntegrations
Address and Checkout Field Input Character Limit
Address and Checkout Field Input Character Limit

Script to apply field character limits to the checkout area inputs.

B
Written by Byron Beleris
Updated over 5 months ago

Here you can find a script that can change the character limits of the checkout inputs.

NOTE:  This script can be added only by an EvoX staff member!

At the beginning of the script, located are the variables that will apply the character limit change of the inputs. Their initial value is 0 which means that the max-length property won't change. For each variable that the value changes to something bigger than 0, the value will be applied to the input that the variable refers to.

Variables:

  • user_name: The name input in the Contact Details area

  • user_phone: The phone input in the Contact Details area

  • address_name: The address name input in the Delivery Details area

  • address_line_one: The address line 1 input in the Delivery Details area for Delivery addresses

  • address_line_two: The address line 2 input in the Delivery Details area for Delivery addresses

  • address_line_three: The address line 3 input in the Delivery Details area for Delivery addresses

  • address_county: The address County / State input in the Delivery Details area for both Billing and Delivery addresses (when they are not a dropdown field)

  • address_postcode: The address Postcode / Zip input in the Delivery Details area for both Billing and Delivery addresses

  • address_delivery_note: The delivery note textarea in the Delivery Details area

  • order_note: The order note textarea in the Review & Pay area

  • po_number: The PO number input in the Review & Pay area

  • alternative_po_number: The Alternative PO number input in the Review & Pay area

  • billing_address_line_one: The address line 1 input in the Delivery Details area for Billing addresses.

  • billing_address_line_two: The address line 2 input in the Delivery Details area for Billing addresses.

  • billing_address_line_three: The address line 3 input in the Delivery Details area for Billing addresses.

  • billing_address_county: The address County / State input in the Delivery Details area for Billing addresses (when they are not a dropdown field).

  • billing_address_postcode: The address Postcode / Zip input in the Delivery Details area for Billing addresses.

Script:

Copy the following script and add it to the Footer Block in the Checkout Custom JS area of the store in Sauron

<script>
// Instructions:
// Change any of the following values to set the max length of the inputs you want.
// If the value is set to 0, then the inputs won't have a max length property

// Account options
var user_name = 0;
var user_phone = 0;

// Delivery Details
var address_name = 0;
var address_line_one = 0;
var address_line_two = 0;
var address_line_three = 0;
var address_county = 0;
var address_city = 0;
var address_postcode = 0;
var address_delivery_note = 0;
var address_company_name = 0;

// Review and pay
var order_note = 0;
var po_number = 0;
var alternative_po_number = 0;

// Billing Details
var billing_address_line_one = 0;
var billing_address_line_two = 0;
var billing_address_line_three = 0;
var billing_address_city = 0;
var billing_address_county = 0;
var billing_address_postcode = 0;
var billing_address_company_name = 0; // Assuming this is needed

$('body').on('input focus', '#personalDetails input[type="text"]', function () {
if(user_name > 0){
$('#personalDetails .checkout-guest-name input').attr('maxlength', user_name);
}
if(user_phone > 0){
$('#personalDetails .checkout-guest-phone input').attr('maxlength', user_phone);
}
});

$('body').on('input focus', '#deliveryDetails input[type="text"]', function () {
if(address_name > 0){
$('#deliveryDetails .contact-name input').attr('maxlength', address_name);
}
if(address_company_name > 0){
$('#deliveryDetails .contact-company input').attr('maxlength', address_company_name);
}
if(address_line_one > 0){
$('#deliveryDetails .contact-address-line1 input').attr('maxlength', address_line_one);
}
if(address_line_two > 0){
$('#deliveryDetails .contact-address-line2 input').attr('maxlength', address_line_two);
}
if(address_line_three > 0){
$('#deliveryDetails .contact-address-line3 input').attr('maxlength', address_line_three);
}
if(address_city > 0){
$('#deliveryDetails .contact-city input').attr('maxlength', address_city);
}
if(address_county > 0){
$('#deliveryDetails .contact-state input').attr('maxlength', address_county);
}
if(address_postcode > 0){
$('#deliveryDetails .contact-postcode input').attr('maxlength', address_postcode);
}
});

$('body').on('input focus', '#deliveryDetails .checkout-delivery-note-textarea', function () {
if(address_delivery_note > 0){
$('#deliveryDetails .checkout-delivery-note-textarea').attr('maxlength', address_delivery_note);
}
});

$('body').on('input focus', '#paymentMethod .checkout-order-note-textareas', function () {
if(order_note > 0){
$('#paymentMethod .checkout-order-note-textareas').attr('maxlength', order_note);
}
});

$('body').on('input focus', '#paymentMethod .checkout-po-number-input, #paymentMethod .checkout-alternative-po-number-input', function () {
if(po_number > 0){
$('#paymentMethod .checkout-po-number-input').attr('maxlength', po_number);
}
if(alternative_po_number > 0){
$('#paymentMethod .checkout-alternative-po-number-input').attr('maxlength', alternative_po_number);
}
});

// Billing Details
$('body').on('input focus', 'input.contact-address-line1.billing-box, input.contact-address-line2.billing-box, input.contact-address-line3.billing-box, input.contact-city.billing-box, input.contact-state.billing-box, input.contact-postcode.billing-box', function () {
if(billing_address_line_one > 0){
$('.billing-box .contact-address-line1 input').attr('maxlength', billing_address_line_one);
}
if(billing_address_line_two > 0){
$('.billing-box .contact-address-line2 input').attr('maxlength', billing_address_line_two);
}
if(billing_address_line_three > 0){
$('.billing-box .contact-address-line3 input').attr('maxlength', billing_address_line_three);
}
if(billing_address_city > 0){
$('.billing-box .contact-city input').attr('maxlength', billing_address_city);
}
if(billing_address_county > 0){
$('.billing-box .contact-state input').attr('maxlength', billing_address_county);
}
if(billing_address_postcode > 0){
$('.billing-box .contact-postcode input').attr('maxlength', billing_address_postcode);
}
});
</script>

Also, the following script should be added in the EvoAdmin Theme Options Developer Footer block to limit the address characters in the my Account Address area

<script>
document.addEventListener("DOMContentLoaded", function () {
var setAddresses = function () {
// Change any of the following values to set the max length of the inputs you want.
// If the value is set to 0, then the inputs won't have a max length property
var address_line_one = 0;
var address_line_two = 0;
var address_line_three = 0;
var address_county = 0;
var address_city = 0;
var address_postcode = 0;
var address_delivery_note = 0;
if ($(".address-view").length) {
if (address_line_one > 0) {
$('input[name="address_line_1"]').attr("maxlength", address_line_one);
$('.c_a_line1').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_line_one);
console.log($('.editable-input > input'));
});
});
}
if (address_line_two > 0) {
$('input[name="address_line_2"]').attr("maxlength", address_line_two);
$('.c_a_line2').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_line_two);
});
});
}
if (address_line_three > 0) {
$('input[name="address_line_3"]').attr("maxlength", address_line_three);
$('.c_a_line3').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_line_three);
});
});
}
if (address_city > 0) {
$('input[name="city"]').attr("maxlength", address_city);
$('.c_a_city').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_city);
});
});
}
if (address_county > 0) {
$('input[name="address_county"]').attr("maxlength", address_county);
$('.c_a_state').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_county);
});
});
}
if (address_postcode > 0) {
$('input[name="address_postcode"]').attr("maxlength", address_postcode);
$('.c_a_postcode').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > input').attr("maxlength", address_postcode);
});
});
}
if (address_delivery_note > 0) {
$('textarea[name="contact_note"]').attr("maxlength", address_delivery_note);
$('.c_a_address_contact_note').on('click', function ($el) {
setTimeout(function () {
$('.editable-input > textarea').attr("maxlength", address_delivery_note);
});
});
}
}
};
setAddresses();
$('#newaddressform > div > div.col-md-12.padding-modal-col > div.first-step > div:nth-child(3) > div > div:nth-child(2) > label').on('click', function () {
setAddresses();
});
$('#newaddress').on('shown.bs.modal', function () {
setAddresses();
});
});

</script>


Did this answer your question?