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 ------>
