加载包含表单输入字段的div之后，如何执行验证JQuery脚本? [英] How can perform a validation JQuery script after that a div containing the input field of a form is loaded?

问题描述

我对JQuery绝对是陌生的，我有以下疑问.

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

我知道这样做:

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

由 function()主体实现的行为是在文档完全显示之后执行的.

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

但是例如，我有以下情况.进入使用Struts 2标记库的页面(但这并不重要，我有一个表单:

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>

s:form 标记是 Struts 2 标记，仅包装标准HTML表单.

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

sj:div 标记是 Struts 2 标记，用于包装包含表单输入字段的div.这被定义到另一个JSP页面中，并且仅在特定事件(当用户单击按钮时)之后才显示.它只是使用包含表单输入字段的 id = resultEvents 生成一个标准HTML div.

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.

所以现在我想使用 JQuery 验证器作为输入字段的值，但是当 $(document).ready()，因为当文档准备就绪时，表单的输入字段未加载到DOM中.

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.

我必须做这样的事情:

$(document).ready(function(){

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

但是在加载具有 id = resultEvents 的div的内容之后，我必须安装 ready 函数.

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

推荐答案

想法:

1)如果您的表单是由另一个模块加载的(或者在调用$ {document).ready时)，则必须设置一个回调或调度一个事件，该事件说明表单准备就绪.

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)单击提交"或尝试提交表单时定义验证器，但是这种方式无法在加载表单时进行验证.

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

这篇关于加载包含表单输入字段的div之后，如何执行验证JQuery脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！