set property pattern of HTML via jQuery

Question

set property pattern of HTML via jQuery

Navigation

#1 by (0 votes)

0

good day. I have a PHP form with a select and an input in HTML, the select with id = idTypeDocument has three options: ID, Passport, Card.

div class="col-sm-4"><label>Tipo de documento de identidad</label><select class="form-control input-sm" id="idTipoDocumento" name = "nTipoDocumento">
                <option value="ID">ID</option>
                <option value="CARNÉ DE RESIDENTE">Carné de Residente</option>
                <option value="PASAPORTE">Pasaporte</option>
            </select>
        </div>

if the user selects ID then via jQuery I set the HTML input pattern with id = idDocument like this:

$('#idTipoDocumento').on('change', function () {
        var documento = $(this).val();
        if(documento=="ID")
        {
        $('#idDocumento').attr("pattern", '[0-9]{8}-[0-9]{1}');
        $('#idDocumento').attr("placeholder", "FORMATO DUI ########-#");
        }

and it works for me, the problem is that when the user selects Passport or meat then I want the input to have no pattern set, at the moment I use this but it does not work for me

$('#idTipoDocumento').on('change', function () {
        var documento = $(this).val();
        if(documento=="DUI")
        {
        $('#idDocumento').attr("pattern", '[0-9]{8}-[0-9]{1}');
        $('#idDocumento').attr("placeholder", "FORMATO DUI ########-#");
        }

        if(documento=="CARNET DE RESIDENTE")
        {
        $('#idDocumento').removeAttr("pattern");
        $('#idDocumento').attr("placeholder", "");
        }

        if(documento=="PASAPORTE")
        {
        $('#idDocumento').removeAttr("pattern");
        $('#idDocumento').attr("placeholder", "");
        }

        });

Could you help me?

the input code is as follows

<div class="col-sm-4"><label>Número de documento de identidad *</label><input type="text" title="especifique número de documento" id="idDocumento" name = "nDocumento"class="form-control" autofocus required oninvalid="setCustomValidity('Debe ingresar número de documento válido')" oninput="setCustomValidity('validar valor')"></div>

jquery html

asked by 18.08.2017 в 21:53

source

1 answer

How to position two tables on the same line with PHP FPDF? Eclipse does not work for me

score 0 · Answer 1

You have more code, simplifying I leave you how it would work what you need

$(function() {
  $('#idTipoDocumento').on('change', function() {
    var documento = $(this).val();
    if (documento == "ID") {
      $('#idDocumento').attr("pattern", '[0-9]{8}-[0-9]{1}');
      $('#idDocumento').attr("placeholder", "FORMATO DUI ########-#");
    } else {
      $('#idDocumento').removeAttr("pattern");
      $('#idDocumento').attr("placeholder", "");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div>
    <label>Tipo de documento de identidad</label>
    <select id="idTipoDocumento" name="nTipoDocumento">
    <option value="ID">ID</option>
    <option value="CARNEDERESIDENTE">Carné de Residente</option>
    <option value="PASAPORTE">Pasaporte</option>
  </select>
    <input id="idDocumento">
  </div>
</body>

</html>