I am working in one inventory project I use bootsrap modal for inserting and updating records the problem that I am facing is that when I am editing the record the jquery validation only applied on first row not on any other row can any one help me in this matter.
index page is like below
<tbody>
@foreach ($suppliers as $key => $supplier)
<tr class="odd">
<td class="sorting_1 dtr-control">{{ $key + 1 }}</td>
<td>{{ $supplier->name }}</td>
<td>{{ $supplier->mobile_no }}</td>
<td>{{ $supplier->email }}</td>
<td>{{ $supplier->address }}</td>
<td>
<a href="#edit{{ $supplier->id }}" data-bs-toggle="modal" class="fas fa-edit" title="Edit Data" style=" margin-right:20px">
</a>
@include('backend.supplier.editSupplier')
</td>
</tr>
@endforeach
</tbody>
Modal is like below
<div class="modal fade editModal" id="edit{{ $supplier->id }}" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Supplier</h5>
<button type="button" class=" btn btn-danger btn btn-sm close" data-bs-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="editForm" method="POST" action="{{ route('supplier.update', $supplier->id) }}"
class="needs-validation" novalidate>
@csrf
@method('PUT')
<div class="modal-body">
<!-- name -->
<div class="col-md-12 ">
<div class="mb-3 position-relative form-group">
<input class="form-control" type="text" autocomplete="name" placeholder="Supplier Name"
id="name" name="name1" value="{{ $supplier->name }}">
</div>
</div>
<!-- mobile number -->
<div class="col-md-12 ">
<div class="mb-3 position-relative form-group">
<input class="form-control " type="text" autocomplete="mobile_no"
placeholder="Mobile Number" id="mobile_no" name="mobile_no1"
value="{{ $supplier->mobile_no }}">
</div>
</div>
<!-- email -->
<div class="col-md-12 ">
<div class="mb-3 position-relative form-group">
<input class="form-control " type="email_address" placeholder="Email" id="email_address"
name="email_address1" value="{{ $supplier->email }}">
</div>
</div>
<div class="col-md-12 ">
<div class="mb-3 position-relative form-group">
<input class="form-control" type="text" autocomplete="address" placeholder="Address"
id="address" name="address1" value="{{ $supplier->address }}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
onclick="resetForm()">No</button>
<button type="submit" class="btn btn-primary">Add Supplier</button>
</div>
</form>
</div>
</div>
</div>
Jquery code is like below
<script type="text/javascript">
$(document).ready(function() {
$('#editForm').validate({
rules: {
name1: {
required: true,
},
mobile_no1: {
required: true,
},
address1: {
required: true,
},
email_address1: {
required: true,
},
},
messages: {
name1: {
required: 'Please Enter Supplier Name',
},
mobile_no1: {
required: 'Please Enter Supplier mobile number',
},
address1: {
required: 'Please Enter Supplier address',
},
email_address1: {
required: 'Please Enter Supplier email',
},
},
errorElement: 'span',
errorPlacement: function(error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
});
});
function resetForm() {
$("#editForm").trigger("reset");
var validator = $("#editForm").validate();
validator.resetForm();
}
</script>
2
Answers
if you try to inspect the modal on each row. the input will have the same name eg. name1, mobile_no1, etc.
Jquery will validate the first input element with that name.
Or
name="mobile_no1<?php $supplier-id ?>") Then, update the jquery function to accept id identifier($supplier->id) so it can fetch the unique input elementThis is a VERY verbose example but here I take a rendered table and remove the form from that. This avoids duplication of the id’s on the form and also gives you smaller HTML and the ability to use the same form over in every row and on and "add" action.
I then trigger the edit with the edit link/button; it saves by submit of the form but you could alter that to post the data using ajax or something also.
I did not venture into the "add" but you could put a button on the screen for that also; stick the id or whatever you need in the "action" to save the NEW item in that part.