1

¿Por qué no cambia la propiedad del .error o del color?

Cod.Postal:
<input type="text" name="codigo" id="idcodigo" maxlength="5" onchange="validarCP();" onKeyPress="return soloNumeros(event);">

El CP admitirá un máximo de 5 dígitos. En caso contrario:

  • El fondo cambia a color rojo.
  • Se mostrará un mensaje.
  • Cuando recupere el foco o se introduzca un CP correcto, cambiará el color del fondo.

Código JavaScript

//Solo permite introducir numeros.
function soloNumeros(e){
    var key = window.event ? e.which : e.keyCode
    return (key >= 48 && key <= 57)
}



function validarCP(){
    //Eliminamos la clase error asignada al elemento CP.
    document.getElementById("idcodigo").className="";
    var valor = document.getElementById("idcodigo").value;
    var patron = /^\d{5}$/;
    if (patron.test(document.getElementById("idcodigo").value) && (!isNaN(valor))){
        document.getElementById("idcodigo").className="correcto";   
        return true;
    }else{
        //Situamos el foco en el campo idcodigo y le asignamos la clase error.
        alert("El código debe tener al menos 5 digitos.\n");
        document.getElementById("idcodigo").focus();
        document.getElementById("idcodigo").className="error";  
        return false;
    }
}
4
  • En la misma pregunta dice (1) "un máximo de 5 dígitos" (2) "al menos 5 dígitos" y (3) tu expresión regular sólo acepta exactamente 5 dgitos.... ¿Cuál de todas es?
    – Mariano
    el 14 may. 2017 a las 17:57
  • @omaza1990, se que tu intención es aprender pero me da la impresión de que estás haciendo preguntas para resolver tus ejercicios, lo digo más que nada por tus tres últimas preguntas, (que he podido apreciar) las veo como ejercicios, te lo digo porque debes intentarlo tu a pesar de que no te salga, los mejores ejercicios son los que se propone uno a medida que va aprendiendo a programar. ;)
    – lromeraj
    el 14 may. 2017 a las 21:17
  • De eso creo que se trata, de plantearse un ejercicio real o ficticio y si una vez dado varias vueltas no se consigue (con código demostable) pues pedir una ayuda para ver dónde está el error. Creo.
    – omaza1990
    el 14 may. 2017 a las 21:39
  • @omaza1990: No se deben incluir etiquetas como "EDITADO" en el título de la pregunta.
    – Rubén
    el 15 may. 2017 a las 10:12

2 respuestas 2

4

Supongo que quieres que tu función se ejecute cuando se cambia algo en el imput, entonces puedes llamarla de esta manera:

<input type='text' id='idcodigo' onchange='validarCP()'>

Si ya estas agregandole la clase error, puedes desde el CSS poner el color rojo a esa clase, así cuando pierda la clase 'error' volverá a su color predeterminado:

.error{
  background-color: red;
}

function validarCP(){
    // Eliminamos la clase error asignada al elemento CP.
    document.getElementById("idcodigo").className="";
    var valor = document.getElementById("idcodigo").value;
    var patron = /^\d{5}$/;
    if (patron.test(document.getElementById("idcodigo").value) && (!isNaN(valor))){
        document.getElementById("idcodigo").className="correcto";   
        return true;
    }else{
        //Situamos el foco en el campo idcodigo y le asignamos la clase error.
        alert("El código debe tener al menos 5 digitos.\n");
        document.getElementById("idcodigo").focus();
        document.getElementById("idcodigo").className="error";  
        return false;
    }
}
.error{
  background-color: red;
}
<input type='text' id='idcodigo' onchange='validarCP()'>

0
2

Aquí te dejo 2 rutina que cumple con tus requerimientos:

1.- Validando con código javaScript tal como lo solicitas, y.
2.- Validando con código HTML5 y que también cumple con tus requerimientos:

Ejemplo con código JavaScript:

function myOnLoad() {
 cargar_provincias();
}
function validarCPonFocus(e) {
 //Elimina la Clase error al hacer foco en el campo
 e.classList.remove("error");
}
function validarCP(e){
 var patron = /^\d{5,5}$/;
 if ( !patron.test(e.value) ) {

 // le asignamos la clase error.
 e.classList.add("error");
 alert("El código Postal debe contener minimo 5 digitos numericos");
 return false;
 }
}
.error {
 background-color:#f00;
}
Cod.Postal:<input type="text" name="codigo" id="idcodigo" maxlength="5" onchange="validarCP(this)" onBlur="validarCP(this)" onFocus="validarCPonFocus(this)">

Ejemplo con código HTML5 (es ideal para validar formularios, escribes mucho menos!! ;))...:

function myOnLoad() {
 cargar_provincias();
}
<form>
Cod.Postal (type=text):<br><input type="text" name="codigo" size="5" minlength="5" maxlength="5" title="El código Postal debe contener minimo 5 digitos numericos" required pattern="^\d{5,5}$">
<br>
<br>
Cod.Postal (type=number):<br><input type="number" name="numero" min="10000" max="99999" title="El código Postal debe contener minimo 5 digitos numericos" required>
<br>
<input type="submit" value="Enviar" />
</form>

7
  • Lo malo que me deja escribir letras, sólo debería permitir dígitos del 0 al 9.
    – omaza1990
    el 14 may. 2017 a las 18:58
  • he modificado la versión html5 para que valide campos de: texto y numérico, y recuerda: califica la respuesta que mas se adecue a tus requerimientos. Saludos!! ;))...
    – fwBasic
    el 14 may. 2017 a las 19:03
  • Revisa nuevamente
    – fwBasic
    el 14 may. 2017 a las 19:14
  • funciones.js:49 Uncaught TypeError: Cannot read property 'value' of undefined
    – omaza1990
    el 14 may. 2017 a las 19:23
  • Con cual navegador estas trabajando?
    – fwBasic
    el 14 may. 2017 a las 19:25

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.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.