I am adding jQuery validation (Laravel) in my form, but the validation is not working for clone fields. I am just writing here required code. after clicking on AddNew button, the question field generates a clone. On the original question, validation is working, but on the clone ones it doesnot. After adding new fields by clicking on Add New button, if I then just submit by writing in original question field but leave empty the clone ones, the form submits.
HTML
<form id="form_sample_om" class="form_class" action="{{X_BASE_URL}}{{$skill_id}}.'skill-development-careers-career/post'}}" method="post" enctype="multipart/form-data">
@csrf
<td width="100%" style="border-right:0;">
<textarea type="text" class="form-control question-field" name="new_skill_sheets[question][]" placeholder="" id="question_1" ></textarea>
</td>
<div class="form-group" id="clone-add-before">
<button type="button" class="float-end btn btn-primary" id="addNew">Add New</button>
</div>
<div class="text-center">
<button class="btn btn-primary" type="submit">Submit Now</button>
</div>
</form>
in Blade file,
<script>
$(document).ready(function () {
let questionCount = 1;
function initializeValidation() { //main validation function
$("#form_sample_om").validate({
rules: {
"new_skill_sheets[question][]": {
required: true,
}
},
messages: {
"new_skill_sheets[question][]": {
required: "This field is required.",
}
}
});
}
initializeValidation();
$("#addNew").click(function () { //after clicking on Add New button
questionCount++; // Increment question number
let newQuestion = `
<tr class="add-module-category">
<td width="20%"><b>Question</b></td>
<td width="100%" style="border-right:0;">
<textarea required class="form-control question-field" name="new_skill_sheets[question][]" placeholder="" id="question_${questionCount}">
</textarea>
</td>
</tr>
`;
$("#activity-list").append(newQuestion); //append itself to original question
// Add validation rules to the new field
$("#question_" + questionCount).rules("add", {
required: true,
messages: {
required: "This field is required.",
},
});
initializeValidation();
$("#form_sample_om").on("submit", function (e) {
if (!$("#form_sample_om").valid()) {
e.preventDefault(); // Stop form submission if invalid
}
});
});
</script>