Autor Tema: JavaScript: validar campo sea solo texto o solo numeros en formulario CU01182E  (Leído 90050 veces)

Arnaldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Saludos desde Venezuela, tengo una consulta con respecto a los ejercicios de su tutorial JavaScript: validar campo texto vacío, numérico o email (correo electrónico). Ejemplos formularios (CU01182E) el mismo me funciona perfectamente pero quisiera saber como puedo hacer para que en el campo de texto solo me acepte letras o numeros segun sea el caso, agradecido por su respuesta.
« Última modificación: 06 de Abril 2015, 23:35 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Saludos igualmente! Tienes que basarte en expresiones regulares como se explica en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=835:expresiones-regulares-javascript-regex-new-caracter-especial-numero-letra-espacio-blanco-cu01154e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206:

\d Hace match con cualquier número entre 0 y 9

[a-z]    Rango de caracteres. Hace match con cualquier carácter comprendido entre el inicial y el final, en orden alfabético. Se pueden definir varios conjuntos uno detrás de otro, por ejemplo: [A-Za-z] indica “letra mayúscula o minúscula”.

Por ejemplo en el propio curso pone como ejemplo esto:

if (isNaN(formulario.edad.value)==true || /^[1-9]\d$/.test(formulario.edad.value)==false ) {alert ('Edad no valida'); todoCorrecto=false;}


Con esto se comprueba que sólo se admitan números.

Si quieres admitir sólo letras te basta poner algo como:

if ( /^[a-z][a-z]*/.test(formulario.edad.nombre)==false ) {alert ('Nombre no valido'); todoCorrecto=false;}


Salu2

Arnaldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Gracias por tu pronta respuesta, provaré y te digo saludos cordiales.

Arnaldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Hola nuevamente, estoy haciendo los cambios citando lo que me dijiste pero no me funciona asi quedo mi código.

Código: [Seleccionar]
function validarFormulario(evObject){
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;

for(var i=0; i<formulario.length; i++){
if(formulario[i].type == 'text'){
if(formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name + 'No puede estar vacio o contener espacios en blanco');

if (/^[a-z][a-z]*/.test(formulario.edad.nombre)==false){
                                       alert ('Nombre no valido')}

todoCorrecto=false;
}

}

}

si este código me conviene porque trata el formulario con arreglos y por eso valida los espacios en blanco de todos los campos solo faltaria colocarle cuando es texto o numero o correo lo que quiero saber si es ahi el lugar donde coloque el codigo de color o es en otra parte estoy un poco confundido y disculpa mi ignorancia es que estoy aprendiendo JS.

Gracias de antemano saludos.

jga

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 31
    • Ver Perfil
Hola , amigos como estais , posiblemente ya lo sabeis los dos , pero me arriesgarè y diré que  basta con poner type number  en el campo de texto , text para texto y email para email , quedando la opcion de required si se desea que sea obligatorio rellenarlo , espero no haber dicho una perogrullada , un abrazo fuerte.

Arnaldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Hola , amigos como estais , posiblemente ya lo sabeis los dos , pero me arriesgarè y diré que  basta con poner type number  en el campo de texto , text para texto y email para email , quedando la opcion de required si se desea que sea obligatorio rellenarlo , espero no haber dicho una perogrullada , un abrazo fuerte.


Hola jga, agradecido por tu respuesta y si ciertamente con colocalr required e indicar en cada caja de texto que tipo de caracteres recibira se solventa de forma muy rápida lo que quiero ahora bien eso es html5 y claro lo voy a usar pero recuerda que no es permitido por todos los navegadores de momento; por eso lo estoy haciendo 1ero con java script y luego que lo tenga dominado ire por JQuery lo que quiero saber es si es correcta mi apreciación donde coloque el if que indica los caracteres en letras agradecido de antemano saludos cordiales.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Hola Arnaldo, la condición está bien pero la tienes dentro de un if que no es el correcto.

Código: [Seleccionar]
if(formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
Al tener tu if dentro de este if, sólo te comprobaría si el campo contiene sólo letras en caso de estar vacío (esto no tiene sentido).

El if tendrías que ponerlo independiente, es decir, comprobar por un lado que no esté vacío y por otro lado que sean letras.

Siguiendo el ejemplo de http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=874:validar-formularios-con-javascript-ejemplo-email-campo-no-vacio-radio-button-checkbox-select-cu01185e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

El código sería algo similar a esto:

 
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;} h4 {margin:0;} div {float:left;}
.estiloForm, #validacionDatos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; }
.estiloForm{ width: 330px; padding:10px;} #validacionDatos {height:226px; padding:10px; background-color: yellow;}
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>

<script type="text/javascript">
window.onload = function () {
                formularioContacto.addEventListener("submit", validarFormulario);
                document.getElementById('validacionDatos').style.visibility = 'hidden';
                formularioContacto.addEventListener("change", ocultarAvisos);
}

 

function ocultarAvisos() {document.getElementById('validacionDatos').style.visibility = 'hidden';}

function validarFormulario(evObject){
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;

for(var i=0; i<formulario.length; i++){
if(formulario[i].type == 'text'){
if(formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name + 'No puede estar vacio o contener espacios en blanco');
todoCorrecto=false;
}

if (/^[a-z][a-z]*/.test(formulario.nombre)==false){
                                       alert ('Nombre no valido');
   todoCorrecto=false;}
}

}
}
</script></head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
    <div class="estiloForm">
        <form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">
        <label>Tratamiento</label> <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
       <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
       <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
        <label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
        <label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/>
        <label>Ciudad</label><select id="ciudad" name="ciudad"><option value="">Elija opción</option>
            <option value="Mexico">México D.F. (MX)</option>   <option value="Madrid">Madrid (ES)</option>
            <option value="Santiago">Santiago (CL)</option>
        </select><br/>

                <label>Preferencias</label><input name="Libros" type="checkbox" />Libros
                <input name="Peliculas" type="checkbox"  />Películas
                <input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
                </form>
    </div>
<div style="float:left;"><div id="validacionDatos" style="float:left;"><h4> Aviso datos a revisar o corregir: </h4></div>
</div></body></html>

Salu2

Arnaldo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Gracias por tu pronta y oportuna respuesta probaré y te aviso agradecido saludos cordiales.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".