I can not validate when I use tag form

Question

I can not validate when I use tag form

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I recently started with this and I'm having a problem with my code. I want to make a simple login form and I am having the problem that I can not perform the validation if I use the form tag, otherwise the validation can be done but I lose the design I get with the form. The code that I have is the following:

In my 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>

In my 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 = "";     
}
}

javascript html bootstrap angularjs

asked by Lucas 24.07.2018 в 16:28

source

3 answers

0

You should use the submit event. To cancel the submit you have to put return false;

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

answered by 24.07.2018 в 16:42

0

AngularJS has the functionality to validate forms using the $valid tag. For example you could validate a input in the following way:

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

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

Now if you need to validate the form completely, you only specify the name followed by $ valid - > mainForm.$valid

answered by 24.07.2018 в 17:25

Does not recognize the as name with SQL Server and Laravel Problems with require_once

score 0 · Accepted Answer

The important thing is that as you have been told the validation you would have to do it with onsubmit in the form tag or add that event in js, because the validation of the form that you have it would not be functional. But still the problem with your code is not to have the submit event but the submit id, so that your code works as well as another with submit you have to change the id of the submit so that it does not match the name of the function . Here is an example of your code with onsubmit and with the id of submit changed.

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>