JavaScript: validar campo sea solo texto o solo numeros en formulario CU01182E

[Arnaldo]

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.

[Ogramar]

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]

Gracias por tu pronta respuesta, provaré y te digo saludos cordiales.

[Arnaldo]

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]

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]

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]

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]

Gracias por tu pronta y oportuna respuesta probaré y te aviso agradecido saludos cordiales.