Before reading this question, I want to tell that @Sparky suggested I check this link jQuery multiple input name[] validation but I can't declare the 18 fields manually in the script.
I have min 18 fields on my popup. I shared the example with 3 fields only. I am using jQuery validation and I am displaying fields dynamically. I have to set the validation of the dynamic field but validation is working only for the first fields, Not working with the dynamic field.
What I am doing, I have a list of records and when admin clicks on the Add button the model will open and then admin can fill the details. My validation is working only for the first field.
Please check my script I think there is some issue with my script It's not calling the script the second time because first, I am using
$(document).on('click', '.addexternal', function() {
then calling the validation
$("#register").validate({
can anyone help me out with this issue?
I am using the below code.
var isReqInprogress = false;
$(document).on('click', '.addexternal', function() {
var user_id = $(this).attr("data-id");
$('#myModal').modal('show');
$("#register").validate({
ignore: [],
rules: {
"fullname[]": {
required: true
},
"dev[]": {
required: true
},
"details[]": {
required: {
depends: function() {
if (($('.dev').val() == "3")) {
return true;
} else {
return false;
}
}
}
}
},
errorPlacement: function(error, element) {
if (element.is("select")) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
//form.submit();
if (isReqInprogress) {
return;
}
isReqInprogress = true;
$.ajax({
url: "process.php",
type: "POST",
dataType: "json",
data: $('#register').serialize(), //i'll add user_id after some time
success: function(data) {
if (data.error == "true") {
alert("added");
} else {
alert("error");
}
isReqInprogress = false;
},
}); // AJAX Get Jquery statment
}
});
});
/*duplicate form fields*/
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//alert("hello");
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".modal-body").append('<div class="row"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <input type="text" name="fullname[]" class="form-control" placeholder="fullname"> </div></div><div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <select name="dev[]" class="form-control dev"> <option disabled="" selected="">Choose</option> <option value="1">Demo1</option> <option value="2">Demo2</option> <option value="3">Demo3</option> </select> </div></div><div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <input type="text" name="details[]" class="form-control"> </div></div></div><a href="javascript:void(0)" class="remove_button">Remove</a></div>');
}
count++;
});
//Once remove button is clicked
$('.modal-body').on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});.modal-dialog {
max-width: 90% !important;
}
.new_add_bank {
position: absolute;
top: -50px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<table class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>fullname</th>
<th>Dev</th>
<th>details</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Demo</td>
<td>Demo1</td>
<td>dgdfg</td>
<td><a href="javascript:void(0)" class="addexternal btn btn-primary" data-id="101">Add</a></td>
</tr>
<tr>
<td>2</td>
<td>xzxc</td>
<td>Demo2</td>
<td>mnbvg</td>
<td><a href="javascript:void(0)" class="addexternal btn btn-primary" data-id="102">Add</a></td>
</tr>
</tbody>
</table>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Popup hading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form method="post" action="#" name="register" id="register">
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<input type="text" name="fullname[]" class="form-control" placeholder="fullname">
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<select name="dev[]" class="form-control dev">
<option disabled="" selected="">Choose</option>
<option value="1">Demo1</option>
<option value="2">Demo2</option>
<option value="3">Demo3</option>
</select>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<input type="text" name="details[]" class="form-control">
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>