Check field “birth date” rescursive with function and activate/deactivate button based on birth date

I want to make a text field that triggers when a person writes his birth day down. For example 00.00.0000 or 00/00/0000. It is currently working, but not consistent. If I delete the birth day, after written it correctly in the text box then the submit button I activated through the script stays activated. How can I make the script recursive, so the button falls back to disabled when the text field isnt correctly filled anymore? “While” does not seem to work here.

<script>
  $('.cart_note').on('input', function(){
    if($(this).val().length == 10){
      var pattern =/^([0-9]{2}).([0-9]{2}).([0-9]{4})$/;
      if(pattern.test($(this).val())){
        $('.btn-submit').removeAttr('disabled');
        $('.enter_dob').text('Vielen Dank!');
      }else{
        $('.cart__submit').attr('disabled','disabled');
        $('.enter_dob').text('Bitte das Geburtsdatum im Format TT.MM.JJJJ eingeben.');
      }
    }else{
      $('.cart__submit').attr('disabled','disabled');
      $('.enter_dob').text('Bitte das Geburtsdatum im Format TT.MM.JJJJ eingeben.'); 
    }
  })
</script>

Answer

You remove the disabled attribute when all is good, but don’t “put it back” when regex doesn’t match

<script>
  $('.cart_note').on('input', function(){
    if($(this).val().length == 10){
      var pattern =/^([0-9]{2}).([0-9]{2}).([0-9]{4})$/;
      if(pattern.test($(this).val())){
        $('.btn-submit').removeAttr('disabled');
        $('.enter_dob').text('Vielen Dank!');
      }else{
        $('.btn-submit').addAttr('disabled'); //ADD HERE
        $('.cart__submit').attr('disabled','disabled');
        $('.enter_dob').text('Bitte das Geburtsdatum im Format TT.MM.JJJJ eingeben.');
      }
    }else{
      $('.btn-submit').addAttr('disabled'); //ADD HERE
      $('.cart__submit').attr('disabled','disabled');
      $('.enter_dob').text('Bitte das Geburtsdatum im Format TT.MM.JJJJ eingeben.'); 
    }
  })
</script>

Cleaner code

You could also clean up your code so there are no two identical else branches:

$('.cart_note').on('input', function(){
    var pattern =/^([0-9]{2}).([0-9]{2}).([0-9]{4})$/;
    if($(this).val().length == 10 && pattern.test($(this).val())){
        $('.btn-submit').removeAttr('disabled');
        $('.enter_dob').text('Vielen Dank!');
    }else{
        $('.btn-submit').addAttr('disabled'); //ADD HERE
        $('.cart__submit').attr('disabled','disabled');
        $('.enter_dob').text('Bitte das Geburtsdatum im Format TT.MM.JJJJ eingeben.');
    }
})

Leave a Reply

Your email address will not be published. Required fields are marked *