Validate checkout fields?

Pajje
Tourist
35 0 1

I guess there is no way to set validation to the checkout fields?

For example i only want to allow 5 digits for zip code, 10 digits for phone number etc.

This is for Swedish customers...

0 Likes
tetchi
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Hey Pajje, as far as I know there is no way to do this since you cannot insert extra JS for validation on checkout pages :(

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Pajje
Tourist
35 0 1

Thanks for your quick reply tetchi!

I guess the people att Shopify have their reasons, but this is a problem for shop owners.

tetchi
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Hey Pajje, I'll pass this on to the developers to see if this is something that can be added in the future, but I can't guarantee anything :(

- tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
chamindri
New Member
1 0 1

Any solution for this issue in 2019 ? 

ebm
Tourist
7 0 2

...or in 2020 for that matter?

0 Likes
Kumar2573
Explorer
75 4 8

You can use this other form validation

<!----- start first name validation -------->
<script>
(function($) {

$(document).on('page:load page:change', function() {

var $phoneField;

var errorClass = 'field--error-plus-dynamic';

var errorMessageSelector = '.field__message--error-plus-dynamic';

// Check input for character limit and remove letters

var validatePhoneNumber = function(phoneField) {

var minChars = 3;

var maxChars =100 ;

var errorMessage = "{{ 'Enter a first name (Allows only English letters)' min_chars: 3, max_chars: 100 }}";

var numbers = phoneField.val().match(/([a-zA-Z|\s])/g) || [];

var numbersLength = numbers.length;

 

// Only allow + and numbers

var allowedChars = phoneField.val().match(/([a-zA-Z|\s])/g) || [];

var phoneFieldVal = phoneField.val;

// Remove non-allowed characters from phone number

phoneField.val(allowedChars.join(''));

if (numbersLength !== 0 && numbersLength < minChars || numbersLength > maxChars) {

// Not enough characters, show error on input.

if (!phoneField.hasClass(errorClass)) {

phoneField.addClass(errorClass);

phoneField.closest('#checkout_shipping_address_first_name').after("<p class='field__message field__message--error-plus-dynamic' style='color:#df1670;margin-left: 8px;'>"+ errorMessage +"</p>");

$("#continue_button").attr("disabled","disabled");


}


return false;

} else {

// Phone number is valid. Remove errors and continue.

$("#continue_button").removeAttr("disabled", "disabled");

phoneField.removeClass(errorClass);

phoneField.closest('#checkout_shipping_address_first_name').nextAll(errorMessageSelector).remove();

return true;
}

}

if (Shopify.Checkout.step === 'contact_information') {

var $phoneField = $('[name="checkout[shipping_address][first_name]"]:not([aria-hidden="true"])');

// Check for enter keypress on form and click button instead.

$('[data-step] form').on('keypress', function(e) {

if (event.keyCode === 13) {

e.preventDefault();

$(this).find('[type="submit"]').trigger('click');

}

});

// Handle form submit by validating button click.

$('[data-step] form [type="submit"]').on('click', function(e) {

//e.preventDefault();

if (validatePhoneNumber($phoneField)) {

$('[data-step] form').trigger('submit');

}

});

// Validate phone number when modified

$phoneField.on('input', function() {

validatePhoneNumber($(this));

});

}

});

})(Checkout.$);

</script>

<!--- end first name validation ------>

0 Likes