Question

我没有看到一个简单的解决方案，所以如果被证明是错误的话，那就会被激怒。简而言之，弹出模态对话框，用户输入一个非唯一值，提交导致字段验证失败但模态仍然关闭：

 <div class="modal fade" id="newtargetModal"
       tabindex="-1" role="dialog"
       aria-labelledby="newtargetModalLabel">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">Target (e.g. hostname)
                <button type="button" class="close"
                   data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
              @include('applications.add')
            </div>
         </div>
       </div>
  </div>

include（applications.add）：

{!! Form::open( ['method'=> 'POST', 'action'=> 'supportedAppsController@store', 'class'=>'form-horizontal'] ) !!}
{{csrf_field()}}
<div class="form-group{{ $errors->has('app_name') ? ' has-error' : 'unique:supported_apps:app_name' }}">
<label for="app_name" class="col-md-4 control-label">Name</label>
<div class="col-md-8">
    <input id="app_name" type="text" class="form-control" name="app_name" style="margin-bottom: 10px"
           value="{{ old('app_name') }}" required autofocus>
    @if ($errors->has('app_name'))
        <span class="help-block">
           <strong>{{ $errors->first('app_name') }}</strong>
           </span>
    @endif
</div>
</div> 
<input type="submit" name="submit" class=" btn-primary" value="Add">
{!! Form::close()!!}

如果验证在按下“添加”按钮时发现app_name不唯一，则模式将关闭。重新打开时，可以看到$ error处理已标记为＆＃34;应用程序名称已被取消＆＃34;。 include用于另一段代码（不是模态）。我想知道在设置$ error的情况下是否有办法阻止Add按钮关闭模态。提前感谢您对此提出的任何建议。凯文

编辑：

我确实尝试了以下内容：

 $(document).ready()
            {
                @if(count($errors)>0)
                  $('#newtargetModal').modal('show');
                @endif
             }

但是我不想回答我自己的问题。这似乎是一个厚颜无耻的解决方案，但我还没有对它进行足够的测试。初步测试表明它解决了弹出对话框的问题....

Answer 1

要提交表单并阻止页面重新加载或重定向错误，您需要通过ajax提交。这样你就可以看到错误。

$(document).on('mousedown touch', ':submit', function() {
    //alert($(this).val());
    var form = $("form");

    $.ajax({
        async: false,
        type: 'POST',
        url: 'your route',
        headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
        data: form.serializeArray(),
        dataType: 'json',
        success: function(data){
            console.log('validated!');
        },
        error: function(data) {
            var errors = data.responseJSON;
            var errorsArr = [];

            for (error in errors) {
                errorsArr.push(errors[error][0]);
            }

            swal({text: "<strong class='text-danger'>" + errorsArr.join("<br>") + "</strong>"});
            console.log("validation failed");
        }

    });
});

我正在使用sweetalert 2插件，因此您必须根据需要调整该部分，但就是这样。

阻止模态关闭提交（Laravel / Bootstrap）

1 个答案: