0

function Validar() { 
var nombre = document.querySelector('input[type=text]'); 
var email = document.querySelector('input[type=mail]');

    if(nombre.value.length == "" )
    {
        alert('No puede qudar vacio');
        return false;
        if(email.value.length < 6)
        {
            alert('El nombre debe tener mas de 6 caracteres');
            return false;
        }

    }
    return true;


}
	<form action="ejercicio_1.html" onsubmit=" return Validar()">
		<div><input type="text" name="nombre" placeholder="Nombre y Apellido"  /></div>
		<div><input type="email" name="email" placeholder="Email"  /></div>
		<div><input type="password" name="clave" placeholder="Clave"  /></div>
		<div><input type="password" name="reclave" placeholder="Confirmar clave"  /></div>
		<hr />
		<div>
			<p>Sexo</p>
			<label><input type="radio" name="sexo" value="masculino" /> Masculino</label>
			<label><input type="radio" name="sexo" value="femenino" /> Femenino</label>
			<label><input type="radio" name="sexo" value="whatever" /> Undefined</label>
		</div>
		<div>
			<p>País / Provincia</p>
			<select name="pais"></select>
			<select name="provincia"></select>
		</div>
		<div>
			<p>Intereses</p>
			<label><input type="checkbox" name="programacion" value="programacion" /> Programacion</label>
			<label><input type="checkbox" name="disenio" value="disenio" /> Diseño</label>
			<label><input type="checkbox" name="musica" value="musica" /> Musica</label>
			<label><input type="checkbox" name="literatura" value="literatura" /> Literatura</label>
			<label><input type="checkbox" name="animacion" value="animacion" /> Animacion</label>
			<p id="cant"></p>
		</div>
		<div><input type="submit" value="Enviar datos" /></div>
	</form>

Soy nuevo en esto de la validación de formularios web. La validación del if para que el nombre no pueda quedar vació funciona, pero básicamente no puedo validar mas de dos cosas seguidas. Es decir, todos los demás if de validación "pisan" a los demas.

4 respuestas 4

0

El principal error es el que te ha comentado Mario, si el nombre no está vacío no entra en la otra comprobación por lo que el formulario se enviará, además para seleccionar el email tienes input[type=mail], te falta una e, para que te funcione correctamente tendrías que tener algo como esto, simplemente he añadido la e a email y he separado las condiciones:

function Validar() { 
var nombre = document.querySelector('input[type=text]'); 
var email = document.querySelector('input[type=email]');

    if(nombre.value.length == "" ) {
        alert('No puede qudar vacio');
        return false;
    } else if(email.value.length < 6) {
            alert('El nombre debe tener mas de 6 caracteres');
            return false;
        } else {
            return true;
        }
}
<form action="ejercicio_1.html" onsubmit=" return Validar()">
    <div><input type="text" name="nombre" placeholder="Nombre y Apellido"  /></div>
    <div><input type="email" name="email" placeholder="Email"  /></div>
    <div><input type="password" name="clave" placeholder="Clave"  /></div>
    <div><input type="password" name="reclave" placeholder="Confirmar clave"  /></div>
    <hr />
    <div>
        <p>Sexo</p>
        <label><input type="radio" name="sexo" value="masculino" /> Masculino</label>
        <label><input type="radio" name="sexo" value="femenino" /> Femenino</label>
        <label><input type="radio" name="sexo" value="whatever" /> Undefined</label>
    </div>
    <div>
        <p>País / Provincia</p>
        <select name="pais"></select>
        <select name="provincia"></select>
    </div>
    <div>
        <p>Intereses</p>
        <label><input type="checkbox" name="programacion" value="programacion" /> Programacion</label>
        <label><input type="checkbox" name="disenio" value="disenio" /> Diseño</label>
        <label><input type="checkbox" name="musica" value="musica" /> Musica</label>
        <label><input type="checkbox" name="literatura" value="literatura" /> Literatura</label>
        <label><input type="checkbox" name="animacion" value="animacion" /> Animacion</label>
        <p id="cant"></p>
    </div>
    <div><input type="submit" value="Enviar datos" /></div>
</form>

0

Más allá de la validación del JavaScript le podes agregar la validación por HTML, que te va a sumar para navegadores que no usen JS.

Agregarle a tus campos: required

Por ejemplo:

 nombre: <input type="text" name="nombre" required>
0

El length es una propiedad que da la cantidad de caracteres que posee una cadena por tanto tendrías que hacerla comparación con un numero entero en el primer if de nombre.

if(nombre.value.length == 0)

O alternativamente si quieres hacerlo desde el value:

if(nombre.value == "")
0

El problema esta en que si tu primer if es false no va a entrar y al if que valida al correo no se va a ejecutar.

Tu codigo quedaria asi:

function Validar() { 

var nombre = document.querySelector('input[type=text]'); 
var email = document.querySelector('input[type=mail]');

    if(nombre.value == "" )
    {
        alert('No puede qudar vacio');
        return false;    
    }

    if(email.length < 6)
    {
         alert('El nombre debe tener mas de 6 caracteres');
         return false;
    }

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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