samedi 6 mai 2017

Javascript regExp Input Validation

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

Aucun commentaire:

Enregistrer un commentaire