最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - JQuery Validation is not properly validating - Stack Overflow

programmeradmin2浏览0评论

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>
发布评论

评论列表(0)

  1. 暂无评论