Как выполнить валидационный JQuery-скрипт после того, как загружен div, содержащий поле ввода формы?

Question

Я абсолютно новичок в JQuery, и у меня есть следующие сомнения.

Я знаю что делаю

$(document).ready(function() {
    DO SOMETHING
    ..............................
    ..............................
    ..............................
}

поведение, реализуемое телом функции (), выполняется после того, как документ полностью отображается.

Но например у меня следующая ситуация. На страницу, которая использует библиотеку тегов Struts 2 (но это не важно, у меня есть форма:

<s:form id="projectForm" >
    <sj:div id="resultEvents" href="%{loadFolderTechId}"
            formIds="treeForm"
            class="result ui-widget-content ui-corner-all"
            loadingText=" "
            onBeforeTopics="before"
            onCompleteTopics="complete"
            deferredLoading="true"
            reloadTopics="reloadEvents"
            >
     </sj:div>
     <s:submit style="display:none" id="submitButton" action="projectCreationAction"/>
</s:form>

Тег s:form - это тег Struts 2, который просто переносит стандартную HTML-форму.

Тег sj:div - это тег Struts 2, который переносит div, содержащий поле ввода формы. Это определяется на другой странице JSP, и это отображается только после определенного события (когда пользователь нажимает на кнопку). Он просто генерирует стандартный HTML-div с id=resultEvents, содержащий поля ввода формы.

Итак, теперь я хочу использовать валидатор JQuery для значений поля ввода, но не могу загрузить его, когда документ готов с помощью $(document).ready(), потому что, когда документ готов, поле ввода моей формы не загружается в DOM.

Я должен сделать что-то вроде этого:

$(document).ready(function(){

    alert("VALIDATION")
    var validator = $("#projectForm").validate({
        rules: {
            "kmProjectInfo.name": "required"
        },
        messages: {
            "kmProjectInfo.name": "Please enter a project name"
        }
    });

Но вставив готовую функцию, я должен загрузить этот скрипт, после чего загружается содержимое div, имеющего id=resultEvents.

Как мне это сделать? Возможно ли это как-то?

Tnx

Answer 1

Идеи:

1) Если ваша форма загружается другим модулем (или когда вызывается $(document).ready), вам придется установить обратный вызов или отправить событие, которое сообщит, когда форма будет готова.

function validator() {
   var validator = $("#projectForm").validate({
      rules: {
        "kmProjectInfo.name": "required"
      },
      messages: {
        "kmProjectInfo.name": "Please enter a project name"
      }
   });
   ...
}

// form_module can be a module you use to load 
// or a struts2 js api or some jquery function that does the work.
$(document).ready(function() {
  form_module.load("url/to/form?", {
   "on_form_loaded": function() { validator(); }
  })
});

2) Определите валидатор, когда вы нажимаете кнопку отправить или пытаетесь отправить форму, но таким образом вы не можете проверить, когда форма загружена.

function validator() {
  var validator = $("#projectForm").validate({
     rules: {
       "kmProjectInfo.name": "required"
     },
     messages: {
       "kmProjectInfo.name": "Please enter a project name"
     }
  });

  ...
}

// ?
$("#submitButton").click(function() { validator(); });
// ?
$("#projectForm").submit(function() { validator(); });