Why does not my form validation work?

Navigation
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>

I am new to the validation of web forms. The validation of the if for the name can not be empty works, but basically I can not validate more than two things in a row. That is, all other validation if "step" on others.

    
asked by Eric 15.07.2018 в 16:55
source

4 answers

0

The main error is the one that Mario mentioned, if the name is not empty it does not enter the other check so the form will be sent, in addition to selecting the email you have input[type=mail] , you need an e, to that you work correctly you should have something like this, I have just added the email address and I have separated the conditions: 

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>
    
answered by 15.07.2018 / 22:48
source
0

Beyond JavaScript validation, you can add HTML validation, which will add you to browsers that do not use JS.

Add to your fields: required

For example: 

 nombre: <input type="text" name="nombre" required>
    
answered by 15.07.2018 в 17:13
0

The length is a property that gives the number of characters that a string has so you would have to make it compared with an integer in the first name if. 

if(nombre.value.length == 0)

Or alternatively if you want to do it from the value: 

if(nombre.value == "")
    
answered by 15.07.2018 в 17:17
0

The problem is that if your first if is false it will not enter and if it validates the mail it will not be executed.

Your code would be like this: 

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;
    }

}
    
answered by 15.07.2018 в 17:12
Error in TextView.measure: JNI DETECTED ERROR IN APPLICATION Run Macro from a query (MS ACCESS 2013)