[SOLUCIONADO] como puedo crear un formulario que al colocar nombre en la casilla si coloco algo

maximov089 · #1 (**permalink**) 06/04/2013, 21:26

Necesito hacer como practica, un formulario al estilo hotmail que cuando ingrese el nombre en la textarea, si coloco un numero o caracter no valido salga un mensaje que diga que no es permitido o algo por estilo...

el mensaje no debe ser con alert

ggomez91 · #2 (**permalink**) 06/04/2013, 23:08

puedes tener un input para meter el nombre y ligarlo a una funcion que valide su contenido y muestre el mensaje. Ponlo en el evento onchange para que lo revise cuando el usuario cambie el contenido. Para validar que los caracteres sean correctos usa una expresión regular, el código sería algo así:

Código:

// en tu js
function validar(){
    // obtener lo que el usuario puso
    var username = document.getElementById('username').value;
   // ver si es valido con la expresion regular
   var expresion = /([A-z]|[0-9])+$/;
    if (expresion.test(username)){ // si es valida
        // mostrar el error
       document.getElementById("errorSpan").style.display = "inline";
    }
}


// tu html
<input onchange="validar()" id="username"></input>
<!-- este span tiene el error pero no se muestra por defecto -->
<span id="errorSpan" style="display:none" id="error">Caracteres inválidos</span>

La expresión que puse incluye a todas las palabras que tengan letras y números, habría que ajustarla para tus necesidades.

maximov089 · #3 (**permalink**) 07/04/2013, 07:46

Hasta ahora este es mi código.... como puedes ver necesito que al colocar un numero en la casilla nombre salga el mensaje de error o algo asi, y como dije no debe ser un alert...

codigo:

Código HTML:

Ver original<html>
    <head>
        <title>FORMULARIO</title>
    <script>
    //Permite solo texto
    function solotexto() {
     if ((event.keyCode != 32) && (event.keyCode < 65) || (event.keyCode > 90) && (event.keyCode < 97) || (event.keyCode > 122))
        
        event.returnValue = false;
    }
    //Función que permite solo Números
    function solonumeros() {
     if ((event.keyCode < 48) || (event.keyCode > 57)) 
        event.returnValue = false;
    }
    </script>
    <head>
    <body bgcolor='ADD8E6' >
    <table width='80%' align='center'>
    <form name='form' action='' method='post'>
        <tr>
            <td><font size='3'>Nombre:</font></td>
        </tr>
        <tr>
            <td><input id='nombre' name='nombre' onkeypress='solotexto()' type='text' size='30'></td>
        </tr>
        <tr>
            <td><font size='3'>Apellido:</font></td>
        </tr>
        <tr>
            <td><input id='apellido' name='apellido' onkeypress='solotexto()' type='text' size='30'></td>
        </tr>
        <tr>
            <td><font size='3'> Edad: </font></td>
        </tr>
    </form>
    </table> 
    </body>
</html>

ggomez91 · #4 (**permalink**) 07/04/2013, 09:34

Hola, ya tienes la función que detecta si se presionó una tecla de letra o número, puedes usar el mismo if para mostrar u ocultar el error. Intenta estas modificaciones y ve lo que hace.

en tu funcion solotexto()

Código:

function solotexto() {
     if ((event.keyCode != 32) && (event.keyCode < 65) || (event.keyCode > 90) && (event.keyCode < 97) || (event.keyCode > 122)){
        document.getElementById("errorSpan").style.display = "inline";
        event.returnValue = false;
		} else{
			document.getElementById("errorSpan").style.display = "none";
		}
	}

Y en tu HTML:

Código:

       <tr>
            <td><input id='nombre' name='nombre' onkeypress='solotexto()' type='text' size='30'></td>
            <span id="errorSpan" style="display:none" id="error">El nombre debe tener solo letras</span>
        </tr>

maximov089 · #5 (**permalink**) 07/04/2013, 10:28

Genial amigo!!! Muchas gracias!!