jQuery validate input characters

Question

I am doing a function activated by input onkeydown, which should check the given characters one by one, and only allow input of those that are valid, this must happen before the characters are shown in the input value.

Code

      var keyPressed = (e.key);
      var element = $(e.target);
      var elementSize = element.val().length;

      if(keyPressed.match(/^|[_.-]+/)){
          console.log("error");
          console.log(elementSize);
          var elementValNew = element.val().substring(0, elementSize -1);
          return element.val(elementValNew);
      else {
           console.log("Sucess");
           return true;
    }

Answer 1

I was able to find the solution to prevent unwanted characters from not being added to the input was to add: Event.preventDefault and Event.stopPropagation in the function, instead of the return false;

Answer 2

I make this validation a little different, take the event, and do the server-side validation. Example:

$(document).on('keyup change', '.input-field', function () {
    var $this = $(this);
    var type = $this.data('input-type');
    var value = $this.val();
    var data = {type: type, value: value};

    $.ajax({
        type: "POST",
        url: "validate.php",
        data: data,
        dataType: 'json',
        success: function (data)
        {

            if (data['status'] === 1) {
                $this.closest('.form-group').removeClass('has-error').addClass('has-success');
                $this.closest('.form-group').find('.required').html("<i class='fa fa-check'></i>");
                $this.closest('.form-group').find('.required').removeClass('required').addClass('ok');
                $this.closest('.form-group').find('.ok').removeClass('symbol');
                $this.addClass('success');
            } else {
                $this.closest('.form-group').addClass('has-error').removeClass('has-success');
                $this.closest('.form-group').find('.ok').removeClass('ok').addClass('required');
                $this.closest('.form-group').find('.required').addClass('symbol');
                $this.closest('.form-group').find('.required').html(data['msg']);
            }
            var a = 0;
            $this.closest('.tab-content').find('.form-control').each(function () {
                if ($(this).hasClass('has-error')) {
                    a += 1;
                }
            });
        }
    });
});

An example of an input to be validated:

    <div class="form-group col-md-12">
<span class='required'>Nome:</span>
<input type="text" class="form-control col-md-2 input-field" data-input-field="name" data-input-type="username">
</div>

An example validator method using the GUMP class with some extensions:

public static function username($var, $field) {
        $is_valid = GUMP::is_valid($var, [
                    $field => 'against_sql_injection,1|alpha_dash|required|max_len,30|min_len,5',
        ]);
        if ($is_valid == 1) {
            $response['status'] = 1;
        } else {
            $response['status'] = 0;
            $response['msg'] = $is_valid[0];
        }
        $response['field'] = $field;
        return $response;
    }