Crops

formalidationSweetalert

Oct 4th, 2016
259
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.43 KB | None | 0 0
  1. <html>
  2.   <head>
  3.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  4.     <title>Ejemplo sweet alert</title>
  5.     <link rel="stylesheet" href="css/bootstrap.css">
  6.     <link rel="stylesheet" href="css/bootstrap-theme.css">
  7.     <link rel="stylesheet" href="css/sweetalert.css">
  8.   </head>
  9.   <body>
  10.     <main class="container">
  11.       <div class="row">
  12.         <div class="col-xs-4 col-xs-offset-4">
  13.           <form id="ejemplo">
  14.             <legend>Validación con form validation</legend>
  15.             <div class="form-group">
  16.               <label for="">Campo de texto</label>
  17.               <input type="text" class="form-control" name="nombreCampo" placeholder="Input field">
  18.             </div>
  19.             <button type="submit" class="btn btn-primary">Enviar</button>
  20.           </form>
  21.         </div>
  22.       </div>
  23.      
  24.     </main>
  25.    
  26.     <script src="js/jquery-dist.js"></script>
  27.     <script src="js/bootstrap.js"></script>
  28.     <script src="js/formValidation-dist.js"></script>
  29.     <script src="js/framework/bootstrap-dist.js"></script>
  30.     <script src="js/sweetalert.min.js"></script>
  31.     <script type="text/javascript">
  32.       $('#ejemplo')
  33.         .formValidation({
  34.           framework: 'bootstrap',
  35.           fields: {
  36.             nombreCampo: {
  37.               validators: {
  38.                 notEmpty: {
  39.                   message: 'Campo vacio.'
  40.                 },
  41.                 stringLength: {
  42.                   min:4,
  43.                   message: 'Minimo de 4 caracteres.'
  44.                 }
  45.               }
  46.             }
  47.           }
  48.         })
  49.         .on('success.form.fv', function(e){
  50.           e.preventDefault();
  51.           var $form = $(e.target);
  52.           var fv = $form.data('formValidation');
  53.           swal({  
  54.             title: "Are you sure?",  
  55.             text: "You will not be able to recover this imaginary file!",  
  56.             type: "warning",  
  57.             showCancelButton: true,  
  58.             confirmButtonColor: "#DD6B55",  
  59.             confirmButtonText: "Yes, delete it!",  
  60.             closeOnConfirm: false },
  61.             function(){  
  62.               swal({
  63.                 title: "Se envio con éxito",
  64.                 closeOnConfirm: false
  65.               },
  66.               function(){
  67.                 fv.defaultSubmit()
  68.               })
  69.             });
  70.         });
  71.     </script>
  72.   </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment