How can perform a validation JQuery script after t

Question

I am absolutly new in JQuery and I have the following doubt.

I know that doing:

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

the behavior implemented by the function() body is performed after that the document is completly show.

But for example I have the following situation. Into a page that use Struts 2 tag library (but this is not important I have a form:

<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>

The s:form tag is a Struts 2 tag that simply wrap a standard HTML form.

The sj:div tag is a Struts 2 tag that wrap a div containing the input field of the form. This is definied into another JSP page and this is showed only after a specific event (when the user click on a button). It simply generate a standard HTML div with id=resultEvents containing the form input fields.

So now I want to use the JQuery validator for the input field values but I can't load it when the document is ready by the $(document).ready() because when the document is ready the input field of my form is not loaded in the DOM.

I have to do something like this:

$(document).ready(function(){

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

But insted the ready function I have to load this script after that the content of the div having id=resultEvents is loaded.

How can I do it? Is it possible in someway?

Tnx

Answer 1

Ideas:

1) If your form is loaded by another module (or when the $(document).ready is called), you'll have to set a callback or dispatch an event that says when the form is 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) Define the validator when you click submit or tries to submit the form, but this way you can't validate when the form is loaded.

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(); });