Question

我想在点击提交按钮后显示甜蜜警报，并且所有验证都是正确的。我已经使用Request类完成了验证。我怎么能这样做？

Answer 1

假设您正在使用sweetalert Facade（Laravel package），应该可以做到这一点：

if ($validator->fails()) {
    //handle your validation errors
} else {
    //validation was succesful show sweetalert and return 
    Alert::success('Success Message', 'Optional Title');
    return Redirect::home();
}

要安装sweetalert laravel包装器，请使用与任何其他包装一样的composer：

composer require uxweb/sweet-alert

然后在laravels config / app.php

中设置别名

提供商：

'providers' => [

    /*
     * Laravel Framework Service Providers...
     */
    ...
    'UxWeb\SweetAlert\SweetAlertServiceProvider',

],

别名：

'aliases' => [
    ...
    'Alert'         => 'UxWeb\SweetAlert\SweetAlert',

],

下载sweetalert files并将它们放在公共目录中，然后从布局文件中链接到它们。

在lavelvel主模板中包含默认布局，如github文档

中所示

@include('sweet::alert')

你现在应该好好去。

自定义视图（alertcancel.blade.php）

@if (Session::has('sweet_alert.alert'))
    <script>
        swal({
            text: "{!! Session::get('sweet_alert.text') !!}",
            title: "{!! Session::get('sweet_alert.title') !!}",
            timer: {!! Session::get('sweet_alert.timer') !!},
            type: "{!! Session::get('sweet_alert.type') !!}",
            showConfirmButton: "{!! Session::get('sweet_alert.showConfirmButton') !!}",
            confirmButtonText: "{!! Session::get('sweet_alert.confirmButtonText') !!}",
            confirmButtonColor: "#AEDEF4",
            showCancelButton: true
            // more options
        });
    </script>
@endif

在主模板中包含自定义视图：@include（'alertcancel'）

sweetalert's github examples

Laravel's Validation Documentation

Answer 2

您可以从此处下载SweetAlert文件：http://t4t5.github.io/sweetalert/

＆＃13;

document.querySelector('button#test-1').onclick = function() {
  swal("Here's a message!");
};
document.querySelector('button#test-2').onclick = function() {
  swal({
    title: "Sweet!",
    text: "Here's a custom image.",
    imageUrl: "https://cdn3.iconfinder.com/data/icons/best-hand/500/Hand_finger_like_thumbs_up-512.png"
  })
};
document.querySelector('button#test-3').onclick = function() {
  swal({
    title: "Are you sure?",
    text: "Your will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  });
};
document.querySelector('button#test-4').onclick = function() {
  swal("Oops...", "Something went wrong!", "error");
};

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Merriweather:300,700);
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300,700);
 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  background: #00000;
  font-family: 'Merriweather', serif;
  color: #efefef;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}
a,
a:visited {
  color: #00000;
}
.wrapper {
  width: 960px;
  margin: 1em auto;
  padding: 2em 3em;
  text-align: center;
  border: 2px solid #FFFFF;
}
h1 {
  font-family: 'Merriweather Sans', sans-serif;
}
button {
  padding: 0.4em 0.8em;
  font-size: 1.1em;
  border-radius: 25px;
  font-family: 'Merriweather Sans', sans-serif;
  color: #fff;
  font-weight: 300;
  background: #sdfs8;
  box-shadow: none;
  border: 1px solid #90AABF;
  cursor: pointer;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.js"></script>
<link rel="stylesheet" type="text/css" href="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.css">


<div class="wrapper">
  <p>
    <button id="test-1">Basic</button>
    <button id="test-2">Success</button>
    <button id="test-3">Fancy</button>
    <button id="test-4">Error</button>
    <p>
      <p>&nbsp;</p>

</div>

＆＃13;

如果在laravel 5中成功完成提交，如何显示甜蜜警报框？

2 个答案: