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.
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 conBootstrap
, porque la parte deJavaScript
funciona bien