如何在提交表單時單擊提交輸入字段來啓動此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" 
     } 
    }); 
    }); 
});