{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace core=TYPO3\CMS\Core\ViewHelpers}

<div class="form-control-wrap" style="max-width: 324px">
    <div class="form-wizards-wrap">
        <div class="form-wizards-element">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="t3js-icon icon icon-size-small icon-state-default" data-identifier="content-elements-mailform">
                        <span class="icon-markup">
                            <img src="/typo3conf/ext/stratis_common/Resources/Public/Icons/phone.svg" width="16" height="16" />
                        </span>
                    </span>
                </span>

                <input id="{element.id}" data-mask="{element.mask}" name="{element.name}" placeholder="{element.placeholder}" class="form-control t3js-phone t3js-clearable" data-formengine-input-name="{element.name}" data-formengine-validation-rules="{validation}" value="{element.value}" maxlength="99" />
            </div>
        </div>
    </div>
</div>

<script>
    var elId = '{element.id}';
    var regexp_validation = /{element.patterns.validation}/;
    var regexp_input = /{element.patterns.input}/;

    $(document).ready(function() {
      $('#' + elId).keypress(function(e) {
        var evt = e || window.event;

        // Handle paste
        if (evt.type === 'paste') {
          key = event.clipboardData.getData('text/plain');
        } else {
          // Handle key press
          var key = evt.keyCode || evt.which;
          key = String.fromCharCode(key);
        }

        if(!regexp_input.test(key) ) {
          evt.returnValue = false;
          if(evt.preventDefault) evt.preventDefault();
          return false;
        }

        if (!regexp_input.test($(this).val() + key)) {
          evt.returnValue = false;
          if (evt.preventDefault) evt.preventDefault();
          return false;
        }
      });

      $('#' + elId).keyup(function(e) {
        var el = $('#' + elId);
        var val = el.val();
        var field = el.parents('.form-group').first();

        field.removeClass('has-error');

        if (val && !regexp_validation.test(val)) {
          field.addClass('has-error');
        }
      });

      $('#' + elId).blur(function(e) {
        $('#' + elId).trigger('keyup');
      });

      $('.btn-sm').click(function () {
        var el = $('#' + elId);
        var val = el.val();
        var field = el.parents('.form-group').first();
        var tab_id = el.parents('.tab-pane').attr('id');
        var tab = $('a[aria-controls="' + tab_id + '"]');

        if (val && !regexp_validation.test(val)) {
          tab.trigger('click');
          field.addClass('has-error');
          el.focus();

          return false;
        }
      });
    });
</script>