Validar formulario con Javascript

[aguila_393]

Bueno arme unas lineas para que por medio de Javascript me controle si algunos campos del formulario estan completos pero no me funciona.
El formulario es ese:
http://www.alexismoyano.com.ar/formulario/form.html

En el codigo fuente pueden ver como esta armado todo.

Espero a ver si alguien sabe como solucionarlo.

Gracias ;).

[_cronos2]

Hola, creo que tienes varios errores en el código, vamos a depurarlo.

Código Javascript:

<script type="text/javascript">
function validar(formulario) {
    if (formulario.nombre.value.length < 4) {
    alert("Escriba por lo menos 4 caracteres en el campo 'Nombre'.");
        //aquí debes usar comillas simples 
        //para no dar a entender que finalizas la cadena
    formulario.nombre.focus();
    return (false);
    }
    var aceptados = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚabcdefghijklmnñopqrstuvwxyzáéíóú ";
    var cadena = formulario.cadena.value;
    var Validado = true;
    for (i = 0; i < cadena.length; i++) {
    ch = cadena.charAt(i);
    for (j = 0; j < aceptados.length; j++){
    if (ch == aceptados.charAt(j))
    break;
    if (j == aceptados.length) {
    Validado = false;
    break;
    }
        }
    }
    if (!Validado) {
    alert("Escriba sólo letras en el campo 'cadena'.");
    formulario.cadena.focus();
    return (false);
    }
        //a partir de aquí tienes mal todos los nombres 
        //de las variables, porque ya han sido declaradas anteriormente. 
        //por tanto debes buscar otro, o ponerles el mismo nombre 
        //y una barra baja para que se diferencien
        //además de eso no hay nada mal, pero en vez 
        //de ir carácter por carácter es más fácil usar la función isNaN()
    var aceptados = "0123456789";
    var cadena = formulario.tel.value;
    var Validado = true;
    var decPoints = 0;
    var allNum = "";
    for (i = 0; i < cadena.length; i++) {
        ch = cadena.charAt(i);
        for (j = 0; j < aceptados.length; j++)
        if (ch == aceptados.charAt(j))
        break;
        if (j == aceptados.length) {
        Validado = false;
        break;
        }
        allNum += ch;
        }
        if (!Validado) {
        alert("Escriba sólo dígitos en el campo 'Telefono'.");
        formulario.tel.focus();
        return (false);
        }
    if ((formulario.mail.value.indexOf ('@', 0) == -1)||(formulario.correo.value.length < 5)) {
        alert("Escriba una dirección de correo válida en el campo "Mail".");
        return (false);
        }
        return (true);
        } 
       //en teoría este último if valida el mail, pero si 
       //te das cuenta, si yo pongo @aaaa me lo valida, 
       //por tanto debes usar una expresión regular. 
       //busca un poco por internet
</script>
 

También me fijé en que usas CSS pero sin embargo pones 400   para que te quede todo alineado, cuando es más fácil usar margin-left y margin-right.
Saludos (:

[aguila_393]

Probe haciendo los cambios que me comentaste pero sigue igual, el problema esta en que no conecta con la funcion de Javascript ya que probe poniendo:

Código HTML:

<script type="text/javascript">
function validar(formulario) {
    alert("Escriba sólo letras en el campo "Nombre".");
    }
</script>
 
<!--
Para que solo muestre un alerta cuadno se envie.
-->
<form method="post" name="valida" onsubmit= "return validar(this)" action="envio.php">
 

Y no hace nada, es como si no leyera el script.

[_cronos2]

Esque si miras la consola de errores seguramente te dirá algo como que Nombre is undefined, porque sigues usando las comillas dobles. Para que no pase eso alterna las dobles con las simples.
Saludos (:

[aguila_393]

Iniciado por _cronos2

Esque si miras la consola de errores seguramente te dirá algo como que Nombre is undefined, porque sigues usando las comillas dobles. Para que no pase eso alterna las dobles con las simples.
Saludos (:

No afectaba, de todas maneras se las saque y sigue sin mostrar ningun mensaje. Estoy googleando a ver porque estoy seguro que debe ser algo sobre como tengo enlazado el formulario con los scripts. Si se te ocurre algo dime ;).

Saludos y gracias deneuvo.

[zodgyy]

Yo te recomendaria que el submit lo controlaras en la funcion

y pondria asi tu funcion:

<script type="text/javascript">
function validar() {

var d = document.forms[0]; //Referencia al formulario
var cadenaValida = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú";

if (d.nombre.value.length < 4) {
alert("Escriba por lo menos 4 caracteres en el campo Nombre.");
d.nombre.focus();
return false;
}
//tus demas validaciones
// ......

d.submit(); //Submit al form
}
</script>

y en el formulario lo cambiaria asi:

<form method="post" name="valida" action="envio.php">

quitandole en onsubmit

y en el boton de submit lo volveria button asi:

<input type="button" value="Enviar" onClick="validar();" />

y por ultimo estas poniedo mal los alerts

alert("Escriba sólo letras en el campo "Nombre".");

serian asi

alert('Escriba sólo letras en el campo "Nombre".');

o

alert("Escriba sólo letras en el campo \"Nombre\".");

[aguila_393]

Iniciado por zodgyy

Yo te recomendaria que el submit lo controlaras en la funcion

y pondria asi tu funcion:

<script type="text/javascript">
function validar() {

var d = document.forms[0]; //Referencia al formulario
var cadenaValida = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú";

if (d.nombre.value.length < 4) {
alert("Escriba por lo menos 4 caracteres en el campo Nombre.");
d.nombre.focus();
return false;
}
//tus demas validaciones
// ......

d.submit(); //Submit al form
}
</script>

y en el formulario lo cambiaria asi:

<form method="post" name="valida" action="envio.php">

quitandole en onsubmit

y en el boton de submit lo volveria button asi:

<input type="button" value="Enviar" onClick="validar();" />

y por ultimo estas poniedo mal los alerts

alert("Escriba sólo letras en el campo "Nombre".");

serian asi

alert('Escriba sólo letras en el campo "Nombre".');

o

alert("Escriba sólo letras en el campo \"Nombre\".");

Ahora si! GRACIAS CAPO

[caricatos]

Iniciado por aguila_393

Ahora si! GRACIAS CAPO

¡Muy mal!

La forma correcta es la que estabas usando al principio: Los formularios se validan desde el evento submit, y siempre que se trate de cosas importantes es aconsejable una doble validación (en el servidor la importante, y en el navegador, con menos importancia, pero ahorra envíos que no valgan...

Si tus visitantes desactivan javascript, jamás podrán enviar tus formularios...

Mi recomendación es que lo hagas bien. Si no te sale es porque tienes algún error... consulta las herramientas de los navegadores para repararlos.

Saludos

[aguila_393]

Iniciado por caricatos

¡Muy mal!

La forma correcta es la que estabas usando al principio: Los formularios se validan desde el evento submit, y siempre que se trate de cosas importantes es aconsejable una doble validación (en el servidor la importante, y en el navegador, con menos importancia, pero ahorra envíos que no valgan...

Si tus visitantes desactivan javascript, jamás podrán enviar tus formularios...

Mi recomendación es que lo hagas bien. Si no te sale es porque tienes algún error... consulta las herramientas de los navegadores para repararlos.

Saludos

Ya tengo armada otra validacion que la hace antes de enviar y la arme en PHP pero el problema era lo del javascript. Igual no entendi porque decis que esta "Muy Mal!", desde el principio el problema que tenia era para armar la validacion en Javascript y aunque lo hubiese armado como al principio si alguien tiene desactivado Javascript es lo mismo.

Gracias y me gustaria si me pudieras explicar porque esta mal asi.

Saludos

[caricatos]

Hola:

Las validaciones que realmente valen (o importan) son las del servidor, y las de los navegadores pueden ser muy valiosas si son útiles, pero si se desactiva javascript, solo vale la del servidor, y para que lleguen esos datos al servidor, el botón de envío debe ser del tipo submit... Prueba a desactivar javascript e intentar enviar el formulario... ¡a que no se puede!. Si el botón fuese tipo submit, el envío se realizaría y se validaría en el server.

La técnica de la validación con javascript es bien simple: al evento se le asigna el valor false para la cancelación: onsubmit="return false".

Solo tienes que cambiar ese false por una función que devuelva false cuando no valide... sí, es así de sencillo, pero si tu función validadora tiene algún error, no llegará a la instrucción del "return false" y se abortará enviando el formulario.

En resúmen, si lo haaces bien y sin errores es útil; creo que solo te falta depurar correctamente tu código, el consejo que solemos dar es usar las herramientas que tienen los navegadores: la más sencilla es la consola de errores que casi todos tienen.

Saludos

[aguila_393]

Iniciado por caricatos

Hola:

Las validaciones que realmente valen (o importan) son las del servidor, y las de los navegadores pueden ser muy valiosas si son útiles, pero si se desactiva javascript, solo vale la del servidor, y para que lleguen esos datos al servidor, el botón de envío debe ser del tipo submit... Prueba a desactivar javascript e intentar enviar el formulario... ¡a que no se puede!. Si el botón fuese tipo submit, el envío se realizaría y se validaría en el server.

La técnica de la validación con javascript es bien simple: al evento se le asigna el valor false para la cancelación: onsubmit="return false".

Solo tienes que cambiar ese false por una función que devuelva false cuando no valide... sí, es así de sencillo, pero si tu función validadora tiene algún error, no llegará a la instrucción del "return false" y se abortará enviando el formulario.

En resúmen, si lo haaces bien y sin errores es útil; creo que solo te falta depurar correctamente tu código, el consejo que solemos dar es usar las herramientas que tienen los navegadores: la más sencilla es la consola de errores que casi todos tienen.

Saludos

Ahora entiendo, no me habia dado cuenta que si desactivaba Javascript no me dejaria enviar el formulario. Vere si logro hacerlo como antes, seguramente el error era que no le ponia al submit falso.

Gracias ;).

[aguila_393]

Iniciado por caricatos

Hola:

Las validaciones que realmente valen (o importan) son las del servidor, y las de los navegadores pueden ser muy valiosas si son útiles, pero si se desactiva javascript, solo vale la del servidor, y para que lleguen esos datos al servidor, el botón de envío debe ser del tipo submit... Prueba a desactivar javascript e intentar enviar el formulario... ¡a que no se puede!. Si el botón fuese tipo submit, el envío se realizaría y se validaría en el server.

La técnica de la validación con javascript es bien simple: al evento se le asigna el valor false para la cancelación: onsubmit="return false".

Solo tienes que cambiar ese false por una función que devuelva false cuando no valide... sí, es así de sencillo, pero si tu función validadora tiene algún error, no llegará a la instrucción del "return false" y se abortará enviando el formulario.

En resúmen, si lo haaces bien y sin errores es útil; creo que solo te falta depurar correctamente tu código, el consejo que solemos dar es usar las herramientas que tienen los navegadores: la más sencilla es la consola de errores que casi todos tienen.

Saludos

Disculpa, me podrias mostrar como armar el boton del submit para que quede return false?

Código HTML:

<form method="post" name="valida" action="envio.php" onsubmit="return false; validar();">
<input type="submit" value="Enviar" />
</form>
 

Asi como lo puse recien?

Debo haber puesto algo mal porque puse eso que publique recien y ya denuevo no me funciona nada, ni envia el formulario ni me salen los alertas de javascript.

[_cronos2]

No se envía porque hay un return false, lo que tienes que devolver es validar(), que a su vez devolverá true o false.
Saludos (:

[caricatos]

Hola:

Lee este tutorial: El abc de los formularios donde explico lo de las validaciones y pongo algunos ejemplos básicos... no es difícil.

Saludos

[aguila_393]

Iniciado por caricatos

Hola:

Lee este tutorial: El abc de los formularios donde explico lo de las validaciones y pongo algunos ejemplos básicos... no es difícil.

Saludos

Gracias, habia estado buscando en muchos lugares un tutorial para entender bien como hacerlo pero todos lo hacian de una manera diferente y por eso la confusion. Ahora pude hacerlo . Gracias denuevo