0

Tengo que verificar que cada campo no este vacío, lo hice ocupando el required de html y bootstrap: hasta ahí todo funciona bien, hasta que hago la validación del Rut para verificar el dígito verificador. Me di cuenta que lo que hace que este campo siempre aparezca con error es la última parte de un script (js) que estoy ocupando para hacer la verificación, es un error más bien visual pero molestoso.

Es como si nunca hubiera ingresado una cadena en ese input y lo arroja como incompleto.

Ejemplo de rut válido: 13.003.680-5

<head>
    <title> Registro </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>  
    <link rel="stylesheet" type="text/css" href="../bootstrap/estilo.css">    
    <nav style="width: auto;height: 25px ;background-color: rgba(206, 198, 181, 0.877);">
        <center> <a href="../Index.html">Inicio </a> | <a href="servicios.html" >Servicios </a> | <a href="resena.html"> Reseña historica </a> | <a href="Registro.html">Registrate</a> | <a href="sugerencias.html">Sugerencia y reclamos</a> </center>
    </nav>
</head>
<body>
    <center> <h1> Biblioteca JAG</h1> </center>
    <center> <img hgb width = "auto" height="auto" src ="https://cdn.pixabay.com/photo/2016/03/26/22/21/books-1281581_1280.jpg"> </center>
    <section>
        <center><h2>Registrate</h2></center>
        <hr>
        <form name="verificar" class="needs-validation" novalidate>
            <div class="form-row">
              <div class="mb-3">
                <label for="verificar">Nombre</label>
                <input id="nombre" name="nombre" type="text" class="form-control" placeholder="Nombre"  onkeypress="return soloLetras(event)"  required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                    <div class="invalid-feedback">
                    Debe rellenar el nombre
                  </div>
              </div>
              <div class=" mb-3">
                <label for="verificar">Apellido</label>
                <input type="text" class="form-control" id="validationCustom02" placeholder="Apellido" onkeypress="return soloLetras(event)"  required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                <div class="invalid-feedback">
                    Debe rellenar el nombre
                </div>
              </div>
              </div>
              <div class=" mb-3">
                <label for="verificar">Contraseña</label>
                <input type="password" class="form-control" id="validationCustom03" placeholder="xxxx" required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                <div class="invalid-feedback">
                    Debe utilizar una contraseña
                </div>
                <div id="passwordHelpBlock" class="form-text">
                    Tu contraseña debe tener entre 8 y 20 caracteres, contener letras y números, y no debe contener espacios, caracteres especiales ni emoji.
                </div>
              </div>
              <div class=" mb-3">
                <label for="verificar">Correo electrónico</label>
                <input type="email" class="form-control" id="validationCustom04" placeholder="xxxxxxx@hotmail.com" required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                <div class="invalid-feedback">
                    Debe ingresar un correo electrónico
                </div>
                <div id="emailHelp" class="form-text">
                    Nunca compartiremos su correo electrónico con nadie más.</div>
                </div>
              </div>
              <div class=" mb-3">
                <label for="verificar">Numero de telefono</label>
                <select class="form-select" aria-label="Default select example" style="width: auto;">
                    <optgroup label="Numeros moviles" >
                        <option value="peru">+51 Perú</option>
                        <option value="argentina">+54 Argentina</option>
                        <option value="Brazil">+55 Brazil </option>
                        <option value="Chile">+56 Chile</option>
                        <option value="Colombia">+57 Colombia</option>
                      </optgroup>
                      <optgroup label="Fijo">
                        <option value="peru">+51 1;84;52 Perú</option>
                        <option value="argentina">+54 11 Argentina</option>
                        <option value="Brazil">+55 61 Brazil</option>
                        <option value="Chile">+56 Chile</option>
                        <option value="Colombia">+57 1 Colombia</option>
                      </optgroup>
                  </select>
                <input type="number" class="form-control" id="validationCustom05" placeholder="123456789" required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                <div class="invalid-feedback">
                    Debe ingresar un numero de telefono
                </div>
                <div id="emailHelp" class="form-text">
                    Su numero de telefono es para verificar nunca lo usaremos de otra forma</div>
                </div>
              </div>
              <div class="mb-3">
                <label for="verificar">Direccion</label>
                <input type="text" class="form-control" id="validationCustom06" placeholder="Direccion"  required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                    <div class="invalid-feedback">
                    Debe rellenar el campo con su Direccion
                  </div>
              </div> 
              <div class="mb-3">
                  <label for="verificar">Rut</label>
                  <input
                    name="rut"
                    id="rut"
                    type="text"
                    class="form-control "
                    placeholder="Ingrese un RUT"
                    onkeypress="return isNumber(event)"
                    oninput="checkRut(this)"
                    maxlength="12"
                  />
                  <div class="message ">
                    <p id="alerta">
                      <span id="mensaje"
                        >Ingrese un RUT en el siguiente campo de texto para saber si el
                        dígito verificador coincide con el cuerpo del RUT.</span
                      >
                    </p>
                </div>
              </div>
              <div class="mb-3">
                <label for="verificar">Fecha de nacimiento</label>
                <input type="date" class="form-control" placeholder="xx.xxx.xxx-x"  required>
                <div class="valid-feedback">
                  Luce bien!
                </div>
                    <div class="invalid-feedback">
                    Debe rellenar el calendario
                  </div>
              </div>
            </div>
              <button class="btn btn-primary" type="submit">Enviar</button>
        </form>
    </section>
   
      
    <script src="pru.js" type="text/javascript"> </script>
    <script src="script.js" type="text/javascript"> </script>



</body>
script=bootstrap
 // Ejemplo de JavaScript de inicio para deshabilitar el envío de formularios si hay campos no válidos
 (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Obtener todos los formularios a los que queremos aplicar estilos de validación de Bootstrap personalizados
      var forms = document.getElementsByClassName('needs-validation');
      // Bucle sobre ellos y evitar la presentación
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
  
  function soloLetras(e) {
    var key = e.keyCode || e.which,
    tecla = String.fromCharCode(key).toLowerCase(),
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyz",
    especiales = [8, 37, 39, 46],
    tecla_especial = false;

    for (var i in especiales) {
    if (key == especiales[i]) {
        tecla_especial = true;
        break;
    }
    }

    if (letras.indexOf(tecla) == -1 && !tecla_especial) {
    return false;
    }
  }

  function soloNumeros(e) {
    var key = e.keyCode || e.which,
    tecla = String.fromCharCode(key).toLowerCase(),
    letras = "0123456789Kk-",
    especiales = [8, 37, 39, 46,],
    tecla_especial = false;

    for (var i in especiales) {
    if (key == especiales[i]) {
        tecla_especial = true;
        break;
    }
    }

    if (letras.indexOf(tecla) == -1 && !tecla_especial) {
    return false;
    }
  }

script=js
donde se presenta el error que hace que la casilla siempre salga como incompleta
// Capturando el DIV alerta y mensaje
let alerta = document.getElementById("alerta");
let mensaje = document.getElementById("mensaje");

// Permitir sólo números y letra K en el imput
function isNumber(evt) {
  let charCode = evt.which;

  if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode === 75) {
    return false;
  }

  return true;
}

function checkRut(rut) {

  if (rut.value.length <= 1) {
    alerta.classList.remove('alert-success', 'alert-danger');
    alerta.classList.add('alert-info');
    mensaje.innerHTML = 'Ingrese un RUT en el siguiente campo de texto para validar si es correcto o no';
  }

  // Obtiene el valor ingresado quitando puntos y guión.
  let valor = clean(rut.value);

  // Divide el valor ingresado en dígito verificador y resto del RUT.
  let bodyRut = valor.slice(0, -1);
  let dv = valor.slice(-1).toUpperCase();

  // Separa con un Guión el cuerpo del dígito verificador.
  rut.value = format(rut.value);

  // Si no cumple con el mínimo ej. (n.nnn.nnn)
  if (bodyRut.length < 7) {
    rut.setCustomValidity("RUT Incompleto");
    alerta.classList.remove('alert-success', 'alert-danger');
    alerta.classList.add('alert-info');
    mensaje.innerHTML = 'Ingresó un RUT muy corto, el RUT debe ser mayor a 7 Dígitos. Ej: x.xxx.xxx-x';
    return false;
  }

  // Calcular Dígito Verificador "Método del Módulo 11"
  suma = 0;
  multiplo = 2;

  // Para cada dígito del Cuerpo
  for (i = 1; i <= bodyRut.length; i++) {
    // Obtener su Producto con el Múltiplo Correspondiente
    index = multiplo * valor.charAt(bodyRut.length - i);

    // Sumar al Contador General
    suma = suma + index;

    // Consolidar Múltiplo dentro del rango [2,7]
    if (multiplo < 7) {
      multiplo = multiplo + 1;
    } else {
      multiplo = 2;
    }
  }

  // Calcular Dígito Verificador en base al Módulo 11
  dvEsperado = 11 - (suma % 11);

  // Casos Especiales (0 y K)
  dv = dv == "K" ? 10 : dv;
  dv = dv == 0 ? 11 : dv;

  // Validar que el Cuerpo coincide con su Dígito Verificador
  if (dvEsperado != dv) {
    rut.setCustomValidity("RUT Inválido");

    alerta.classList.remove('alert-info', 'alert-success');
    alerta.classList.add('alert-danger');
    mensaje.innerHTML = 'El RUT ingresado: ' + rut.value + ' Es <strong>INCORRECTO</strong>.';

    return false;
  } else {
    rut.setCustomValidity("RUT Válido");

    alerta.classList.remove('d-none', 'alert-danger');
    alerta.classList.add('alert-success');
    mensaje.innerHTML = 'El RUT ingresado: ' + rut.value + ' Es <strong>CORRECTO</strong>.';
    return true;
  }
}

function format (rut) {
  rut = clean(rut)

  var result = rut.slice(-4, -1) + '-' + rut.substr(rut.length - 1)
  for (var i = 4; i < rut.length; i += 3) {
    result = rut.slice(-3 - i, -i) + '.' + result
  }

  return result;
}

function clean (rut) {                                              
  return typeof rut === 'string'
    ? rut.replace(/^0+|[^0-9kK]+/g, '').toUpperCase()
    : ''
}

Esta última función me provoca ese error.

6
  • 3
    Debes agregar un ejemplo mínimo verificable, con énfasis en lo MINIMO
    – Yussef
    el 26 may. a las 3:49
  • Hola Eduardo, bienvenido, podrías mostrarnos cual sería un rut válido?. el 26 may. a las 4:15
  • @MarcePuente Hola gracias! , le dejo un rut válido 13.003.680-5
    – Eduardo
    el 27 may. a las 6:20
  • Maestro, al menos acá, tu código funciona como se espera.. el 27 may. a las 6:29
  • Cuando ingreso el rut que me diste me devuelve "El RUT ingresado: 13.003.680-5 Es CORRECTO.", supongo que el problema (si es que hay uno) puede estar relacionado con Bootstrap, porque la parte de JavaScript funciona bien el 27 may. a las 7:05

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.