Tengo una función en javascript para llamar a sweetalert basado en la userinput pero dulce de alerta no está funcionando dentro de bootstrap modelo.

alguien me puede ayudar a cabo

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">
      <input type="text" id="input1" onblur="alerts()">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>
 </div>

JavaScript:

function alerts()
{
  var inputs = document.getElementById("input1").value;
  if(inputs < 2)
  {
  swal('Not Valid', 'Enter another','warning');
  }
}
InformationsquelleAutor JavaLearner1 | 2015-12-03

2 Comentarios

  1. 2

    sólo tenía que reordenar su función ligeramente

    http://jsfiddle.net/link2twenty/oj5cfp6j/

    JS:

    alerts = function () {
      var inputs = document.getElementById("input1").value;
      if (inputs < 2) {
        swal('Not Valid', 'Enter another', 'warning');
      }
    }

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">
        <input type="text" id="input1" onblur="alerts()">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
      </div>
    </div>

    • Su trabajo! Gracias!
  2. 1

    Yo no soy gran fan de JavaScript por lo que no puede asegurarse por qué no funciona con blur(), pero se puede hacer con jQuery keyup función

    JS:

    $(document).ready(function () {
      $('#input1').keyup(function () {
        var inputs = $(this).val();
        if (inputs < 2) {
          swal('Not Valid', 'Enter another', 'warning');
        }
      });
    });

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <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">
            <input type="text" id="input1" class="form-control">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    • Sigue sin funcionar…
    • ¿se ejecuta el código anterior, entraste en el valor 1 para comprobar y ¿incluye todos los archivos como se incluye en la respuesta, CSS y JS, ver lo que falta en el código de la causa que se está trabajando en el fragmento de si entrar 1 en la entrada
    • Esto sólo comprueba cuando escribe, OP lo quiere en la selección
    • ahhh, OP puede utilizar change o keydown función, en mi opinión user experience siempre es lo primero, así que es mejor de esta manera si usted instantáneamente notificar al usuario de que hay algo mal en vez de alerta cuando el usuario haga clic o hacer cualquier otra cosa fuera de la entrada
    • de esta manera se consigue una notificación entre cada golpe de tecla, aunque (en realidad sólo si se pulsa la tecla de espacio)
    • no sólo recibirá una notificación cuando ciertas condiciones de cumplir y que en este caso es < 2 y no perder el foco en la entrada cuando se alerta cerrado que creo que es mejor user experience lugar, a continuación, escriba > haga clic en el exterior > alert show > cerca de alerta > haga clic en la entrada de nuevo tipo
    • Su trabajo ahora! Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here