问题
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] );
}
}
}
});
});
This is my controller
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' => '成功添加新记录',
]);
}
This is my modal
<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>
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)
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
回答1:
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()]);
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] );
}
来源：https://stackoverflow.com/questions/64656611/my-validation-not-working-in-bootstrap-modal-using-ajax