如何在提交表单时单击提交输入字段来启动此JQuery验证？

Question

我是绝对新的JQuery，我有以下问题。到页我有一个表格，是这样的：

<s:form id="projectForm"> 
    <s:textfield name="kmProjectInfo.name" size="19"/> 
    ..................................... 
    ..................................... 
    ..................................... 
    <s:submit style="display:none" id="submitButton" action="projectCreationAction"/> 
</s:form> 

的标签是从Struts 2的UI标签库标签那么简单呈现形式和呈现以下标准的HTML 输入标签到我的网页：

<input type="text" id="kmProjectInfo_name" value="" size="19" name="kmProjectInfo.name"> 

而且标签使这个标准的HTML 提交输入按钮到我的网页：

<input id="submitButton" type="submit" style="" value="Submit" name="action:projectCreationAction"> 

然后在我的页面我definied这个jQuery 验证脚本：

$(document).ready(function() { 

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

正如你可以看到这个剧本SIMPL采取具有NAME = “kmProjectInfo.name”以前呈现输入字段并说thif字段是必需的。

我的问题是，当文档完全加载时（因为它被定义为$（document）.ready（）函数），但我绝对需要只在提交表单时发生验证点击其ID =“提交按钮”呈现的输入字段，这一个：

<input id="submitButton" type="submit" style="" value="Submit" name="action:projectCreationAction"> 

我怎样才能做到这一点？你能帮我做吗？

TNX

Answer 1

把你的代码在提交按钮的的onclick

$("#submitButton").on('click',function() { 

     // VALIDATION: 

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

Answer 2

$(document).on("click","#submitButton",function(e) 
{ 
    // VALIDATION: 
    var validator = $("#projectForm").validate({ 
     rules: { 
      "kmProjectInfo.name": "required" 
     }, 
     messages: { 
      "kmProjectInfo.name": "Please enter a project name" 
     } 
    }) 
}); 

，或者如果你想保留它在文档准备体：

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

Answer 3

试试这个，

$(document).ready(function() { 
    $("#projectForm").on('submit',function(){ 
    // VALIDATION: 
    var validator = $(this).validate({ 
     rules: { 
      "kmProjectInfo.name": "required" 
     }, 
     messages: { 
      "kmProjectInfo.name": "Please enter a project name" 
     } 
    }); 
    }); 
});