我的验证在使用Ajax的Bootstrap Modal中不起作用 [英] My validation not working In Bootstrap Modal using Ajax
本文介绍了我的验证在使用Ajax的Bootstrap Modal中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我添加表单的ajax帖子，当我 console.log data.errors 时，我得到了该值，但是当我按时它没有出现提交按钮.
This is my ajax post of the adding form, when I console.log the data.errors , I get the value but it doesn't appears when I press the submit button.
$('#guanyinAdd').click(function(e){
e.preventDefault();
var id = $('#sx_ID').val();
var receipt = $('#gylight_receipt').val();
var amount = $('#gylight_amount').val();
var number = $('#gylight_number').val();
var label = $('#gylight_label').val();
var remark = $('#gylight_remark').val();
var sDate = $('#gylight_sDate').val();
var eDate = $('#gylight_eDate').val();
$( '#gyReceipt-error' ).html( "" );
$( '#gyNumber-error' ).html( "" );
$( '#gySdate-error' ).html( "" );
$.ajax({
url: "<?= route('admin.guanyin.add.api') ?>",
method: 'post',
data:{
_token: "{{ csrf_token() }}",
sx_ID: id,
gylight_receipt: receipt,
gylight_amount: amount,
gylight_number: number,
gylight_label: label,
gylight_remark: remark,
gylight_sDate: sDate,
gylight_eDate: eDate
},
success: function(data){
if(data.success) {
var guanyin = data.guanyin;
$('#gyFee').prepend('<tr id="gyPost'+ guanyin.id +'">'+
'<td>'+
'<a href="#" '+
'data-id="'+ guanyin.id +'"'+
'data-gylight_receipt="'+ guanyin.gylight_receipt +'"'+
'data-gylight_amount="'+ guanyin.gylight_amount +'"'+
'data-gylight_number="'+ guanyin.gylight_number +'"'+
'data-gylight_label="'+ guanyin.gylight_label +'"'+
'data-gylight_remark="'+ guanyin.gylight_remark +'"'+
'data-gylight_sdate_string="'+ guanyin.gylight_sdate_string +'"'+
'data-gylight_edate_string="'+ guanyin.gylight_edate_string +'"'+
'class="btn btn-success gyEdit"'+
'data-toggle="modal">操作</a>'+
'</td>'+
'<td>'+ guanyin.gylight_receipt +'</td>'+
'<td>'+ guanyin.gylight_amount +'</td>'+
'<td>'+ guanyin.gylight_number +'</td>'+
'<td>'+ guanyin.gylight_label +'</td>'+
'<td>'+ guanyin.gylight_remark +'</td>'+
'<td>'+ guanyin.gylight_sdate_string +'</td>'+
'<td>'+ guanyin.gylight_edate_string +'</td>'+
'</tr>');
$('#lastgy').remove();
$('#guanyinModal').modal('hide');
$('#guanyinForm').trigger('reset');
swal({
title: "successfully",
text: data.success,
icon: "success",
});
}
if(data.errors) {
console.log(data.errors);
if(data.errors.gylight_receipt){
$( '#gyReceipt-error' ).html( data.errors.gylight_receipt[0] );
}
if(data.errors.gylight_number){
$( '#gyNumber-error' ).html( data.errors.gylight_number[0] );
}
if(data.errors.gylight_sDate){
$( '#gySdate-error' ).html( data.errors.gylight_sDate[0] );
}
}
}
});
});
这是我的控制人
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'gylight_receipt' => 'required',
'gylight_number' => 'required',
'gylight_sDate' => 'required',
],[
'gylight_receipt.required' => 'Pls Enter the receipt number',
'gylight_number.required' => 'Pls Enter the light number',
'gylight_sDate.required' => 'Pls Enter the start date',
]);
if ($validator->fails())
{
return response()->json(['errors'=>$validator->errors()->all()]);
}
$guanyin = new Guanyin();
$guanyin->sx_ID = $request->sx_ID;
$guanyin->gylight_receipt = $request->gylight_receipt;
$guanyin->gylight_amount = $request->gylight_amount;
$guanyin->gylight_number = $request->gylight_number;
$guanyin->gylight_label = $request->gylight_label;
$guanyin->gylight_remark = $request->gylight_remark;
$guanyin->gylight_sDate = Carbon::createFromFormat('d/m/Y', $request->gylight_sDate)->format('Y-m-d');
$guanyin->gylight_eDate = Carbon::createFromFormat('d/m/Y', $request->gylight_eDate)->format('Y-m-d');
$guanyin->save();
Light::where('sx_ID','=',$request->sx_ID)
->update(['gylight' => 1]);
return response()->json([
'guanyin' => $guanyin,
'success' => '成功添加新记录',
]);
}
这是我的模态
<form id="guanyinForm">
<div class="form-group row mb-2">
<label for="sx_ID" class="col-sm-4 col-form-label">sxID:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="sx_ID" value="{{ $light->sx_ID }}" readonly>
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_receipt" class="col-sm-4 col-form-label">Receipt Number:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_receipt">
<span class="text-danger">
<strong id="gyReceipt-error"></strong>
</span>
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_amount" class="col-sm-4 col-form-label">Amount:</label>
<div class="col-sm-8">
<select name="gylight_amount" id="gylight_amount" class="form-control">
<option>Choose amount</option>
@foreach ($gyprice as $item)
<option data-years="{{$item->years}}" value="{{ $item->gylight_amount }}">
RM{{ $item->gylight_amount }}
</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_number" class="col-sm-4 col-form-label">Light Numer:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_number">
<span class="text-danger">
<strong id="gyNumber-error"></strong>
</span>
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_label" class="col-sm-4 col-form-label">Label:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_label">
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_remark" class="col-sm-4 col-form-label">Remark:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_remark">
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_remark" class="col-sm-4 col-form-label">Start Date:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_sDate">
<span class="text-danger">
<strong id="gySdate-error"></strong>
</span>
</div>
</div>
<div class="form-group row mb-2">
<label for="gylight_remark" class="col-sm-4 col-form-label">Due Date:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="gylight_eDate" readonly>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-primary float-right" id="guanyinAdd">Submit</button>
</div>
</div>
这是 console.log data.errors 结果
This is the console.log data.errors result
Array(3)
0: "Pls Enter the receipt number"
1: "Pls Enter the light number"
2: "Pls Enter the start date"
length: 3
__proto__: Array(0)
这是 console.log data 结果
This is the console.log data result
{errors: Array(3)}
errors:(3)["Pls Enter the receipt number","Pls Enter the light number","Pls Enter the start date"]
__proto__: Object
推荐答案
您将返回错误，其中包含 $ validator-> errors()-> all()，这将为您提供一系列带有数字索引的错误消息.它不会将字段名称用作数组的索引.您必须像这样发送它
you are returning errors with $validator->errors()->all() which will give you an array of error messages with numeric index. it will not use the field name as the index of the array. you have to send it like
return response()->json(['errors' => $validator->errors()]);
这将返回一个以字段名作为键，错误消息作为值(数组形式的值)的数组.然后您就可以在js end中做什么.
this will return an array with filed name as the key and error message as the value (values in array form). and then you can do what are you doing in js end.
if (data.errors.gylight_receipt) {
$( '#gyReceipt-error' ).html( data.errors.gylight_receipt[0] );
}
这篇关于我的验证在使用Ajax的Bootstrap Modal中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
