why jquery validation not work when form loaded from back end?

I have a form with jquery validation when form load from back end If the user deletes the field text, the jquery error stating that this field is required will not be displayed until the form is submitted.

<div class="form-group  mb-2 p-0">
      <input type="text" name="title" class="form-control" id="title" aria-describedby="emailHelp"
      placeholder="Title" minlength="4" style="background: #fcfbc3; border: none; border-radius: 10px; padding: 20px;" required>
      </div>
     <div class="form-group mx-auto p-0" style="width: 100%;">
     <textarea class="form-control m-0" name="description" id="description" placeholder="Description"      rows="10" style="width: 100%; " required></textarea>
     </div>
     <script>
         document.getElementById('title').value = "{{meeting.title}}";
         document.getElementById('description').value = "{{meeting.description}}";
     </script>

$("#create-meeting-form").validate({
    rules: {
        members_email: {
            required: true
        }
    },
    messages: {
        // lat: "please specify location",
        title: "please enter title",
        description: "please enter description",
        meeting_photo: "please add image",
        members_email: "please enter email"
    }
}).settings.ignore = [];

when form loaded form back end this error not shown immediately