Because changing the validation in the onchage event does not work for me

Question

Because changing the validation in the onchage event does not work for me

Navigation

#1 by (0 votes)

1

I have a problem with the following code.

$('#selDocTipo').change(function () {
    var $optionSelected = $("#selDocTipo option:selected")
    var TipoDocId = $optionSelected.val();
    // dni 8 pasaporte 10 tarjeta de secretaria
    $("#txtNumDocProm").val("");
    $("#txtNumDocProm").attr('disabled', false);
    if (TipoDocId == 47) {
        //dni
        $("#txtNumDocProm").attr('maxlength', '8');
        $("#txtNumDocProm").attr('onkeypress', 'ValidaNumvit(event)');
    } else if (TipoDocId == 51) {
        //Pasaporte
        $("#txtNumDocProm").attr('maxlength', '12');

    } else if (TipoDocId == 52) {
        //Carnet Extranjeria
        $("#txtNumDocProm").attr('maxlength', '12');
    }
});

My html is this:

<div class="form-group">
    <label class="col-md-2 control-label">Tip. Doc.. : </label>
        <div class="col-md-3">
            <select class="selectpicker" id="selDocTipo" >
                <option value="47">DNI</option>
                <option value="51">Pasaporte</option>
                <option value="52">Carnet de Extrangeria</option>
            </select>
        </div>
        <div class="col-md-3">
            <input type="text" id="txtNumDocProm" class="form-control" placeholder="Nº de Documento" />
        </div>
    </div>

my ValidaNumvit function is.

function ValidaNumvit(event) {
    var keycode = event.which;
    if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
    event.preventDefault();
    }
}

It happens that when I select first DNI, it fulfills everything, but then if I select another option it will only accept numbers. It's like if I saved it in cache, or I do not know, but when I choose another first option, it accepts all the characters, but I select dni , I'm left with only numbers until I refresh the page .

Does anyone know why that happens?

jquery eventos

asked by Vitmar Aliaga 31.08.2016 в 19:44

source

1 answer

Problems with the token Compilation GWT with eclipse

score 0 · Accepted Answer

The problem is that your event onkeypress remains activated. You have to remove it when you select another value with

$("#txtNumDocProm").removeAttr('onkeypress');

This is the complete example

function ValidaNumvit(event) {
  var keycode = event.which;
  if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
    event.preventDefault();
  }
}

$(function() {
  function changeEvt() {
    var $optionSelected = $("#selDocTipo option:selected")
    var TipoDocId = $optionSelected.val();
    var txtNumDocProc = $("#txtNumDocProm");

    // Elimino cualquier evento anterior
    txtNumDocProc.removeAttr('onkeypress');

    // dni 8 pasaporte 10 tarjeta de secretaria
    txtNumDocProc.val("");
    txtNumDocProc.attr('disabled', false);
    if (TipoDocId == 47) {
      //dni
      txtNumDocProc.attr('maxlength', '8');
      txtNumDocProc.attr('onkeypress', 'ValidaNumvit(event)');
    } else if (TipoDocId == 51) {
      //Pasaporte
      txtNumDocProc.attr('maxlength', '12');

    } else if (TipoDocId == 52) {
      //Carnet Extranjeria
      txtNumDocProc.attr('maxlength', '12');
    }
  }

  $('#selDocTipo').change(changeEvt);

  changeEvt();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-2 control-label">Tip. Doc.. :</label>
  <div class="col-md-3">
    <select class="selectpicker" id="selDocTipo">
      <option value="47">DNI</option>
      <option value="51">Pasaporte</option>
      <option value="52">Carnet de Extrangeria</option>
    </select>
  </div>
  <div class="col-md-3">
    <input type="text" id="txtNumDocProm" class="form-control" placeholder="Nº de Documento" />
  </div>
</div>

I recommend that you cache your selectors, you use $("#txtNumDocProm") seven times, if you store it in a variable your application will work more quickly. You must also execute the logic of the event change when the DOM is loaded so that the validations are done correctly.