jQuery validate characters in input

Question

jQuery validate characters in input

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm doing a function activated by the onkeydown of input, which should check the characters entered one by one, and only allow input into the input of those that are valid, this must happen before the characters are shown in the value of the input. / p>

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;
    }

jquery input

asked by anonymous 27.07.2017 / 20:06

2 answers

1

I was able to find the solution to prevent the unwanted characters from being added to the input, either by adding: event.preventDefault and event.stopPropagation to the function instead of the false return;

27.07.2017 / 20:41

How to get communication response using MQTT Duplicate random numbers

score 0 · Accepted Answer

I do this realtime validation a bit differently, I get 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;
    }