me gustaría introducir un input en mi formulario, para verificacion de IBAn, el caso es que no doy con el elemento html para darle este estilo, me refiero concretamente, a un input que dentro del mismo tenga subdivisiones entre dígitos, adjunto foto para que se entienda mejor, cualquier ayuda es bien agradecida.[![introducir la descripción de la imagen aquí][1]][1]
-
1Hola Moises, bienvenido a SOes. Te recomiendo leer Cómo preguntar, hacer el recorrido de bienvenida (y ganar así tu primera medalla) y aprender a hacer un ejemplo mínimo verificable. ¿Qué has intentado hasta ahora? ¿De dónde has sacado la imagen? Porque si tienes acceso a la página puedes inspeccionar cómo lo han resuelto otros.– Kiko_LCommented el 14 feb. 2019 a las 8:21
2 respuestas
Usa varios inputs. Con CSS les puedes dar el formato o apariencia de uno solo con varios campos. Con javascript controlas que cuando el usuario haya rellenado cada uno con el número de cifras esperado pase automáticamente al siguiente input hasta rellenar todo.
Un par de cosas antes de explicarte lo que preguntas. Borra la imagen, pues tiene datos que no deberían aparecer aquí. Entiendo que estás montado la web tu, por lo que debes saber que este tipo de imágenes constituyen un problema con las políticas de privacidad, estás poniendo una serie de datos ahí que podemos usar cualquiera para hacer el mal, como por ejemplo empezar a mandarles publicidad a esa dirección. Si quieres mostrar el diseño basta con que pongas una captura solo de los inputs, aunque sería recomendable que tuvieras algo de código ya hecho, lo hubieras intentando un poco y nos mostrases que código tienes y que pasos has seguido pegando aquí parte de tu código.
Por otro lado, y en relación a tu pregunta, necesitas saber un par de cosas primero:
¿Como se genera el código IBAN? ¿Como puedo asegurarme de que el IBAN que introduce el cliente es el correcto? ¿Puedo asegurarme de que es correcto de algún modo en la estructura de mi web?
Para la primera pregunta la respuesta es:
En primer lugar, se escribe ES00 seguidos de los 20 dígitos de la CCC. Esto nos da una secuencia de 24 caracteres.
Sustituimos las letras por números del 10 al 35 siguiendo el orden del abecedario, siendo A=10 y Z=35.
Calculamos el resto de la división por 97, y le restamos 98.
Mediante este sencillo cálculo podemos obtener los códigos de control; si su diferencia es menor que 10, añadimos un 0 a la izquierda.
Para la segunda pregunta deberás generar una validación a ese formulario, que va a depender de si puedes, o no, meter javascript/jQuery a tu web.
Y la tercera pregunta. Vamos a suponer que puedes meter jQuery, si no pudieras quizá con PHP podrías.
Si puedes meter jQuery deberás, primero, crear el formulario. Este en concreto lo puedes hacer con varios inputs que contengan las clases necesarias para darles un formato adecuado. No te olvides de ponerles un placeholder, en lugar de los XX que salen, y, a ser posible, un alt o title (muy necesario para aquellas personas que usan un lector de pantalla).
La estructura podría ser algo así:
<form id="miformulario">
<input type="number" name="dc1" placeholder="Dígito de Control" title="Dígito de Control" min="2" max="2" required>
<input type="number" name="cb" placeholder="Código de Banco" title="Código de Banco" min="4" max="4" required>
<input type="number" name="sc" placeholder="Sucursal de la Cuenta" title="Sucursal de la Cuenta" min="4" max="4" required>
<input type="number" name="dc2" placeholder="Dígito de Control" title="Dígito de Control" min="2" max="2" required>
<input type="number" name="nc" placeholder="Número de cuenta" title="Número de cuenta" min="10" max="10" required>
<input type="submit" name="enviar" class="benviar">
</form>
Una vez tenemos el formulario, o la parte que nos interesa en verdad, podemos validar con jQuery.
$(function(){
$('#miformulario .benviar').on('click', function(e){
dc1=$('input[name=dc1]').val();
cb=$('input[name=cb]').val();
sc=$('input[name=sc]').val();
dc2=$('input[name=dc2]').val();
nc=$('input[name=nc]').val();
E= 15;
S=21;
suma= E+S+dc1+cb+sc+dc2+nc;
division= suma/97;
resta=division-98;
if (resta===dc1) {
alert("todo bien, se envia el form");
}else{
e.preventDefault();
alert("Hubo un error");
}
})
}
Esto no es es exacto así que, por favor, no copies y pegues, mira que hace cada cosa en conjunto y modifica lo que necesites. Si tienes dudas avisa e intento detallar mas. Un saludo.
-
Tienes razón en lo que dices sobre datos personales pero no parecen datos reales, el DNI no es válido y la calle no coincide con el código postal.– user7176Commented el 14 feb. 2019 a las 11:54
-
Ya, no son datos reales, pero si va a unirse a la comunidad lo mejor es que este tipo de cosas no las repita, para evitar sustos, problemas y llamadas de atención de otros usuarios. El borrar la imagen es para que suba una adecuada, y se le pueda decir si es la correcta. Un saludo. Commented el 14 feb. 2019 a las 12:24