0

No tengo mucho conocimiento sobre bootstrap. Quiero hacer una condicion para desplegar la ventana modal. Si los campos A y B estan vacíos, quiero mostrarla. de lo contrario no se debe mostrar. Este es mi codigo:

if(username=='undefined' && password=='undefined'){
  	 	console.log(username);
  	 	 $('#myModal').modal({
  	 	 	show:true
  	 	 });
  	 	login.username="";login.password="";
  	 }else{
  	 	$('#myModal').modal({
  	 	 	show:false
  	 	 });
  	 }
<form>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info" ng-click="login.ingresar()">Aceptar</button>
            
          </form>
         

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cerrarModal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Lo que necesito en si es validar unos campos, para lo que quiero desplegar una ventana modal con los errores en caso de que los campos esten vacios, pero cuando no lo esten, necesito que el formulario se envíe. Pueden darme una guía porfis? Actualmente se muestra esten o no esten llenos los campos

2 respuestas 2

1

le puede servir a alguien más:

 $('#myModal').modal('show');
 event.preventDefault();//Esto es para cancelar el envio
 event.stopPropagation();*

Asi evitaras que que se envie el formulario.

0

Hola Yohana puedes capturar el evento submit y validar los campos antes de enviar el formulario. Puedes mostrar el modal con jquery $('#myModal').modal('show'). Para el ejemplo hago uso de jquery v3.4.1 y bootstarp v3.4.0, te recomiendo revisar la documentación de jQuery

$(document).ready(function(){

	$( "#target" ).submit(function( event ) {
    
      var username = $("#name").val();
      var password = $("#password").val();
      if(username=="" || password==""){
           $('#myModal').modal('show');
           event.preventDefault();//Esto es para cancelar el envio
      }else{
          alert( "Los datos se enviaran!." );
      }  
	});
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
<script>
<!-- aqui entra el script -->
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <form id="target" action="destination.html">
<div class="form-group">
    <label for="name">UserName</label>
    <input type="text" class="form-control" id="name" aria-describedby="userlHelp" placeholder="Enter user">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
  
  <!-- Trigger the modal with a button -->
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Los campos estan vacios.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

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.