使用 laravel 提交带有验证的模态表单
Posted
技术标签:
【中文标题】使用 laravel 提交带有验证的模态表单【英文标题】：Submit modal form with verification using laravel 【发布时间】：2021-08-18 05:21:02 【问题描述】：我是laravel 的新手，我不知道如何处理laravel、ajax 和jquery
现在我正在将数据插入数据库的过程中，我设法做到了，只是我在数据验证级别遇到了问题，我想check the data at some point of entry and not after when I click on the submit button。
所以我使用以下代码：
我的刀片页面：
<x-app-layout>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>Castings</h1>
<div class="top-right-button-container">
<div class="btn-group">
<button type="button" name="create_record" id="create_record" class="btn btn-success btn-sm">Create Record</button>
</div>
</div>
<div class="separator"></div>
</div>
</div>
</div>
<!-------------- Model Ajouter -------------------------------------->
<div class="modal fade bd-example-modal-lg" id="formModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="form_result"></span>
<form id="sample_form" method="post" enctype="multipart/form-data">
csrf_field()
<!-- <input type="hidden" id="id_hidden" name="id" /> -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_name">Nom</label>
<input type="text" class="form-control" id="casting_name" name="casting_name" placeholder="Nom" >
<!-- <span class="text-danger"> $errors->first('casting_name') </span> -->
</div>
<div class="form-group col-md-6">
<label for="casting_cin">CIN</label>
<input type="text" class="form-control" id="casting_cin" name="casting_cin" placeholder="Cin">
<!-- <span class="text-danger"> $errors->first('casting_cin') </span> -->
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_email">Email</label>
<input type="text" class="form-control" id="casting_email" name="casting_email" placeholder="Email">
<!-- <span class="text-danger"> $errors->first('casting_email') </span> -->
</div>
<div class="form-group col-md-6">
<label for="casting_phone">Téléphone</label>
<input type="text" class="form-control" id="casting_phone" name="casting_phone" placeholder="Téléphone">
<!-- <span class="text-danger"> $errors->first('casting_phone') </span> -->
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_age">Age</label>
<input type="number" class="form-control" id="casting_age" name="casting_age" placeholder="Age">
<!-- <span class="text-danger"> $errors->first('casting_age') </span> -->
</div>
<div class="form-group col-md-6">
<label for="casting_sexe">Sexe</label>
<div class="custom-control custom-radio">
<input type="radio" name="casting_sexe" id="casting_sexeh" class="custom-control-input" value="homme">
<label class="custom-control-label" for="casting_sexeh">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="casting_sexe" id="casting_sexef" class="custom-control-input" value="femme">
<label class="custom-control-label" for="casting_sexef" >Femme</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="casting_city">City</label>
<input type="text" class="form-control" name="casting_city" id="casting_city">
<!-- <span class="text-danger"> $errors->first('casting_city') </span> -->
</div>
<div class="form-group col-md-6">
<label for="casting_address">Address 2</label>
<input type="text" class="form-control" id="casting_address" name="casting_address" >
<!-- <span class="text-danger"> $errors->first('casting_address') </span> -->
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" name="casting_photo" class="custom-file-input" id="casting_photo">
<span id="store_image"></span>
<div class="input-group-prepend">
<span class="text-danger"> $errors->first('casting_photo') </span>
</div>
<label class="custom-file-label" for="casting_photo">Choose file</label>
</div>
</div>
<!-- <button type="submit" id="createBtn" class="btn btn-success">Sign in</button> -->
<div class="form-group" align="center">
<input type="hidden" name="action" id="action" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="Add" />
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function()
$('#create_record').click(function()
$('.modal-title').text("Add New Record");
$('#action_button').val("Add");
$('#action').val("Add");
$('#formModal').modal('show');
);
$('#sample_form').on('submit', function(event)
event.preventDefault();
if($('#action').val() == 'Add')
$.ajax(
url:"castingss",
method:"POST",
data: new FormData(this),
contentType: false,
cache:false,
processData: false,
dataType:"json",
success:function(data)
var html = '';
if(data.errors)
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
html += '<p>' + data.errors[count] + '</p>';
html += '</div>';
if(data.success)
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#sample_form')[0].reset();
/* $('#user_table').DataTable().ajax.reload();*/
$('#form_result').html(html);
)
);
);
</script>
</x-app-layout>
我的控制器：
public function store(Request $request)
$rules = array(
'casting_name' => 'required',
'casting_cin' => 'required',
'casting_email' => 'required|email',
'casting_phone' => 'required|min:4',
'casting_age' => 'required',
'casting_sexe' => 'required',
'casting_city' => 'required',
'casting_address' => 'required',
'casting_photo' => 'required|image|max:2048'
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
return response()->json(['errors' => $error->errors()->all()]);
$image = $request->file('casting_photo');
$new_name = $request->get('hidden_id') . '.' . $image->getClientOriginalExtension();
$image->move(public_path('images'), $new_name);
$form_data = array(
'casting_name' => $request->casting_name,
'casting_cin' => $request->casting_cin,
'casting_email' => $request->casting_email,
'casting_phone' => $request->casting_phone,
'casting_age' => $request->casting_age,
'casting_sexe' => $request->casting_sexe,
'casting_city' => $request->casting_city,
'casting_address' => $request->casting_address,
'casting_photo'=>$new_name
);
Casting::create($form_data);
return response()->json(['success' => 'Data Added successfully.']);
目前一切顺利，数据已插入，但数据验证在单击按钮提交后完成。
我目前的结果：
正如您所见，当我单击提交按钮时，我收到了错误消息，而我不希望在输入时收到错误消息。
感谢任何帮助
【问题讨论】：
【参考方案1】：根据我的阅读，您希望使用客户端验证，但实际上您正在使用 服务器端验证，如果您想执行 客户端验证，即实时验证我推荐使用Jquery Validation。 这是来自同一官方页面的演示：https://jqueryvalidation.org/files/demo/
这里是它的文档：https://jqueryvalidation.org/
【讨论】：
感谢您的回复，但是我如何将它与 ajax 一起使用？以上是关于使用 laravel 提交带有验证的模态表单的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET Core 5 MVC：在模态窗口之前验证表单
带有 Bootstrap 模态视图的 Rails 应用程序，包含表单、提交和消失模态视图，无需重新加载页面