1

hace poco empece con esto y estoy teniendo un problema con mi código. Quiero hacer un formulario sencillo de inicio de sesión y estoy teniendo el problema que no puedo realizar la validación si uso la etiqueta form, de lo contrario la validación se puede hacer pero pierdo el diseño que obtengo con el form. El código que tengo es el siguiente:

En mi HTML

<form id="formulario" name="formulario"> 
<center><img id="img" src="login.png" alt="iniciar sesión"/></center>
<label id="lbl-inicio"><b>Iniciar Sesión</b></label>
<br/> <br/>
<hr> 
<input type="text" placeholder="Nombre Usuario" name="usuario" id="usuario" 
ng-model="form.usuario"/>
<br/>
<input type="password" placeholder="Contraseña" name="contraseña" 
id="contraseña"/>
<br/>
<input type="submit" class="btn btn-info" id="iniciar" onclick="iniciar()" 
value="Iniciar Sesión"/>
<input type="button"  class="btn btn-danger" id="cancelar" 
onclick="cancelar()" value="Cancelar"/>
</form>

En mi JS

function cancelar(){
document.getElementById("usuario").value = "";
document.getElementById("contraseña").value = "";
}

function iniciar(){ 
if (document.getElementById("usuario").value=="admin" && 
document.getElementById("contraseña").value=="admin"){
alert("Sesión iniciada");
}
 else  {
    alert("Error de autenticación");
    document.getElementById("usuario").value = "";
    document.getElementById("contraseña").value = "";     
}
}
2
  • creo que el iniciar deberías estar en un onsubmit en la etiqueta form de html y ahí ejecutas la función de iniciar , y por validación errónea haces return false, para que no genere el envío. el 24 jul. 2018 a las 14:31
  • o cambiar el boton de tipo "submit" a un boton de tipo "button".
    – Duston
    el 24 jul. 2018 a las 14:41

3 respuestas 3

0

Lo importante es que como te han dicho la validación tendrías que hacerla con onsubmit en la etiqueta form o añadir dicho evento en js, porque la validación de la forma que lo tienes no sería funcional. Pero aún así el problema que tiene tu código no es no tener el evento submit sino el id del submit, para que te funcione tanto tu código como otro con submit tienes que cambiar el id del submit para que no coincida con el nombre de la función. Aquí tienes un ejemplo de tu código con onsubmit y con el id del submit cambiado.

function iniciar() { 
if (document.getElementById("usuario").value=="admin" && 
document.getElementById("contraseña").value=="admin"){
alert("Sesión iniciada");
  return true;
}
 else  {
    alert("Error de autenticación");
    document.getElementById("usuario").value = "";
    document.getElementById("contraseña").value = "";    
    return false;
}
}
function cancelar(){
document.getElementById("usuario").value = "";
document.getElementById("contraseña").value = "";
}
<form id="formulario" name="formulario" onsubmit="iniciar()"> 
<center><img id="img" src="login.png" alt="iniciar sesión"/></center>
<label id="lbl-inicio"><b>Iniciar Sesión</b></label>
<br/> <br/>
<hr> 
<input type="text" placeholder="Nombre Usuario" name="usuario" id="usuario" 
ng-model="form.usuario"/>
<br/>
<input type="password" placeholder="Contraseña" name="contraseña" 
id="contraseña"/>
<br/>
<input type="submit" class="btn btn-info" id="inicio"
value="Iniciar Sesión"/>
<input type="button"  class="btn btn-danger" id="cancelar" 
onclick="cancelar()" value="Cancelar"/>
</form>

0

Deberías usar el evento submit. Para cancelar el submit tenés que poner return false;

$('#myform').submit(function() {
      // your code here
    return false;
    });
0

AngularJS tiene la funcionalidad de validar formularios mediante la etiqueta $valid. Por ejemplo podrías validar un input de la siguiente manera:

<form name="mainForm">
<input name="name" ng-model="name" required>
</form>

<h1>{{mainForm.name.$valid}}</h1>
</form>

Ahora si necesitas validar el formulario por completo, sólo especificas el nombre del mismo seguido de $valid -> mainForm.$valid

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.