Shopify Question posted in
The Shopify help center can be found here.

Javascript regExp Input Validation – Shopify

This is my first post and i think the answer is very easy but i don’t get it:

I (try) to build a shopify store but i have to make some modifications and here is the point at where i am stuck:

On my Product Page i want to inluce a <input type=text>, which is required, can only be Capital Letters and the length must min. be 1 and max. 10. I tried it with html5 pattern but it didn’t worked. I read something, that if the shopify theme includes ajax, it just ignores the pattern and the required attribute (i don’t know if this is true).

So i tried to make my own functions:

$('#dein-text').on("change textInput input", function(evt) {
    $(this).val(function (_, val) {
        return val.toUpperCase();
    });
});

this just should return the string into capital letters.

function checkText() {
    var re = /(?=.*[A-Z]).{1,6}/;
    if(re.test($('#dein-text').val())) {
        $('#problem-bei-input').hide();
        $('.add', $product).removeClass('disabled').removeAttr('disabled');
    } else {       
        $('#problem-bei-input').show();
        $('.add', $product).addClass('disabled').attr('disabled', 'disabled');
    }
}

this function is executed at every change on the input form:
$('#dein-text').on("change textInput input", checkText);

This does not work, because it removes the disabled class if there is min. 1 letter (it does not check if there are more than 6) and if there is one capital letter (something like “HA11” does not add the (.disabled) class).

i hope i could describe what my problem is.

Thank you for your help!

edit: this is the .liquid code of the whole form:

https://codepen.io/shawdyy/pen/PmOPWy

(i hope you can see this on codepen, sry i am really new to the webdev thing)

Tags:

2

Answers


  1. 0

    You can try:

    $('#my_id').on("change input", function(evt) {
    $(this).val(function (_, val) {
        return val.toUpperCase().replace(/[^A-Z]/, "").replace(/^([A-Z]{1,10}).*$/g, "$1");
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_id">
    Login or Signup to reply.
  2. 0

    To only allow one to ten uppercase ASCII letters in the input field use the following HTML5 pattern:

    <input type="text" pattern="[A-Z]{1,10}" title="Only 1 to 10 uppercase ASCII letters allowed!">

    If you need to match a string that only contains 1 to 10 uppercase ASCII letters in plain JS, you need

     var re = /^[A-Z]{1,10}$/;

    Note that start and end anchors (^ / $) are added by the HTML5 automatIically when using the regex in the pattern attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search